How to update state of parent from child component in reactJS - reactjs

Question

class A extends Component {
constructor(props) {
super(props);
this.state = {
fruitsDetailsList: [],
fruitCode: this.props.fruitCode,
};
}
showModal = () => {
this.setState({ show: true });
};
hideModal = () => {
this.setState({ show: false });
};
componentDidMount() {
const url = 'http://localhost:3000/getFruitslist';
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
fruitCode: this.state.fruitCode,
}),
})
.then(res => {
if (res.ok) {
return res.json();
}
throw new Error(res.status);
})
.then(res => {
this.setState({
fruitsDetailsList: res.fruitDetailsList,
});
})
.catch(error => {});
}
render() {
const columns = [
{
Header: 'Sr.No',
id: "row",
maxWidth: 50,
Cell: (row) => {
return <div>{row.index + 1}</div>
}
},
{
Header: 'Actions',
id: 'FruitName',
accessor: d => (
<div>
<B/>
</div>
)
}
];
return (
<div>
<ReactTable
className="-striped -highlight"
columns={columns}
data={this.state.fruitsDetailsList}
defaultPageSize={10}
noDataText={'No Data available.'}
/>
<p></p>
</div>
);
}
Class B extends component{
constructor(props) {
super(props);
this.state = { modal: false };
this.toggle = this.toggle.bind(this);
}
toggle() {
this.setState({
modal: !this.state.modal
});
}
render() {
return (
<div>
<Button onClick={this.toggle}/>
<Modal isOpen={this.state.modal}>
<ModalHeader>Fruits list</ModalHeader>
<ModalBody>
<Formik
initialValues={{fruitName: ''}}
onSubmit={(fields, action) => {
action.setSubmitting(true);
const url = 'http://localhost:3000/getFruit';
fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
fruitName: fields.fruitName,
}),
})
.then(res => {
action.setSubmitting(false);
console.log("Success!!!);
})
.catch(error => {});
}}
render={({ errors, touched, isSubmitting }) => (
!isSubmitting ? (
<Form>
<div className="form-group">
<label htmlFor="fruitName">FruitName</label>
<Field name="fruitName" type="text"/>
</div>
<div className="form-group">
<Button type="submit" className="bg-gradient-theme-left border-0 " size="m">Submit</Button>
</div>
</Form>
)
)}
/>
</ModalBody>
</Modal>
</div>
);
}
}
- REACT JS
As you can see there are 2 classes
1)Component A
2)Component B
In Component A I am calling B component as Button in react-table
Actually we have to render react table with all the data in database by calling post API request '/getFruitslist' which we are calling in componentDidMount of Component A so that data in react-table gets populated correctly in table
Now when we click on button of Component B one record gets inserted in
database but as API is called in ComponentDidMount of Component A which is
parent of Component B , data does not populate in react-table on clicking button of B component . How to achieve this ?

Answer 1

The philosophy of React is to manage the state into the top component. A child component should not keep a reference to its parent in order to update the parent state.
To achieve this behavior, the parent component should pass a callback to the child component through its properties, then the child component can invoke this callback by calling the matching property
In your example, you can pass a property onAddFruit to the B component. When the POST call succeed, you should call this function
.then(fruit => {
action.setSubmitting(false);
console.log("Success!!!);
this.props.onAddFruit(fruit);
})
In the parent component A, you define a function which will add a fruit to the state variable fruitsDetailsList. Then you pass this function to the component B through the property onAddFruit
handleAddFruit = fruit => {
this.setState(prevState => ({
fruitsDetailsList: [...prevState.fruitsDetailsList, fruit]
});
};
The declaration of the B element will be like this :
<B onAddFruit={this.handleAddFruit}/>

Answer 2

There are ways to achieve what you are looking for. The easiest one is to pass down through props the necessary objects, values. In complex cases I would recommend to use redux for application state management, it is way more easier to keep your state consistent in a case when you need to have the state objects accessible in several components.
Pass down the props:
Once you have 2 components, data can be passed down for example from A to B. Sharing below 1 small example how you can achieve that:
class A extends Component {
constructor(props) {
super(props);
this.state = {
fruitsDetailsList: [],
fruitCode: this.props.fruitCode,
};
}
render {
return (
<B dataFromA={this.state.fruitsDetailsList} />
)
}
}
Redux option:
So what is Redux?
A predictable state container for JavaScript apps.
Basically your application will have the state object in 1 common place what you can match to each components if it needs to be accessed with mapStateToProps function from redux. The link Connect: Extracting Data with mapStateToProps explains how to that in more details. Once you need to modify any of the elements you can use mapDispatchToProps to do so. Please find the Connect: Dispatching Actions with mapDispatchToProps link for further setup.
Read further about the setup, getting started here: Redux
Summary:
In your scenario because of API calls, possible frequent update in state objects I recommend to go with the second option. It might be complicated at the first look but it is worth to effort because you don't need to worry about the state consistency and through props the data is updated automatically once you have modification on any of the objects.
I hope this helps!