I am learning typescript with react and I occurred problem. I tried to pass function as a prop from my App component to child component named DataForm.
but I got an error:
Type '(f: any) => any' is not assignable to type '() => void'.
Parameter 'f' implicitly has an 'any' type.
And this is my code
App.tsx
import React from 'react'; import './App.css'; import DataForm from './components/form'; export const Data = { name: "", country: "", age:"", adress:"" } function App() { const generateCard = ()=>{ console.log(" generateCard runned") } return ( <> <h1>Human Card Generator</h1> <DataForm createCard = { generateCard }/> </> ); } export default App;
components/form.tsx
import React from 'react' import { Data } from '../App' import 'bootstrap'; interface dataFormProps{ createCard: ()=>void } export default function DataForm({ createCard = f => f }: dataFormProps){ const dataProceed = (e: any) =>{ Data.name = (document.getElementById('name') as HTMLInputElement).value; Data.country = (document.getElementById('country') as HTMLInputElement).value; Data.age = (document.getElementById('age') as HTMLInputElement).value; Data.adress = (document.getElementById('adress') as HTMLInputElement).value; createCard(); } return( <form onSubmit = { dataProceed }> <input type="text" id = "name" /> <input type="text" id = "country" /> <input type="number" id="age" /> <input type="text" id = "adress"/> <button type="submit">stwórz kartę</button> </form> ) }
The issue isn't when passing the function, it's when destructuring the props and providing a default function:
{ createCard = f => f }: dataFormProps
This code indicates that createCard
should be a function which accepts a parameter and returns a value. Which it doesn't:
createCard: ()=>void
Make the default parameter match the signature:
{ createCard = () => {} }: dataFormProps
default function createCard
should has type () => void
. So just update like this:
DataForm({ createCard = () => {} }: dataFormProps)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.