I’m practicing React by creating a CV form. I’ve create several input components that hold state (‘pending’, ‘submitted’, ‘editing’) so that they can be individually edited and saved without effecting the other components. However, I want the form itself, which would be the parent, to trigger the setState of all of the components to ‘submitted’ when the form is submitted. How do I do this?
I’m thinking I have to create some kind of callback function in the form component that is then sent down to the input component to trigger the setState function. But I’m not sure how to do that.
I’ve looked at lifting the state up instead, but I’m not sure how to make sure that each input component can still be left unaffected when I want to edit just one.
2
Answers
then put the state in the parent component and then move the state and setState as props to the children.
share the specific part of the code and I’d show you
Elaborating on @Niv G’s suggestion with some code examples.
Since you haven’t shared any code samples to get an idea, I assume your form component looks like this.
You can set the state of all components to
submitted
by lifting the state up passing it to the components as follows.You would handle the status prop in each individual field as follows.