The idea is to use React’s props and render to update a function in a unrelated React component synchronously .
There are three steps:
- Set a variable in Component A with whatever name you want. In this case, I name it
goUpdate
.//in Constructor this.state = { goUpdate : 1; }; //in render <ComponentB goUpdate = {this.state.goUpdate} />
The reason I give it a integer value is because if I give it a boolean, the render system in Component A and Component B will end up in an infinite loop.
- Set a variable in Component B with whatever name you want. In this case, I also name it
goUpdate
. And then in Component Brender
, do a check on goUpdate’s value. If the value passed from Component A is larger than the saved value, call the function you want.//in Constructor this.goUpdate = this.props.goUpdate //in render if (this.props.goUpdate > this.state.goUpdate){ handleFunction }
- Then , all you need to do is to update
goUpdate
in Component A, then handleFunction in component B will be triggered.