111
rated 0 times
[
115]
[
4]
/ answers: 1 / hits: 23156
/ 3 Years ago, mon, august 23, 2021, 12:00:00
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>
)
}
More From » reactjs
