i am new to React and i am working on a CV project.
I have the following situation:
PersonalData.js (child) that handles a form dynamically updating the state of the component.
App.js(parent) contains the function eventHandler that is passed to PersonalData as a prop:
<Route path="/" exact element={<PersonalData onChange={this.eventHandler}/>} />
On the child side, i use the prop as it follows when i click the submit button:
handleSubmit = (e) => {
e.preventDefault();
this.props.onChange(this.state)
};
Returning to the parent component, the eventHandler looks like this:
eventHandler = (data) =>{
console.log(data.firstName)
this.setState({
firstName: data.firstName,
lastName: data.lastName,
age: data.age,
location: data.location,
email: data.email,
phone: data.phone,
gender: data.gender,
})
console.log(this.state);
}
the first console.log shows the value, but after i update the state of the parent component, on the 2nd console.log the state is empty. Can't figure out what i am missing.
