I have a simple modal in which I have a form on submit I display errors now I want to pass these errors to the children component.
Here is a simplified parent component
import React from 'react';
import Input from 'components/Functional/Input';
function Parent() {
const [errors, setErrors] = useState([]);
const handleSubmit = async e => {
const formData = new FormData();
}
return (
<Modal handleSubmit={handleSubmit}>
<Input setErrors={errors} ></Input>
</Modal>
)
}
export default Parent
Here is my children component
import React from 'react'
function Input({errors}) {
const [field, setField] =useState('');
console.log('errors', errors)
return (
<div>
<input type="text" onChange={e => setField(e.target.value)} />
</div>
)
}
export default Input
Now when I submit the data with errors, the console.log('errors', errors)
in the children component I get undefined
What is wrong here?
question from:
https://stackoverflow.com/questions/65891706/how-to-pass-data-from-parent-to-children-with-react-hooks 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…