1. Introduction:
If you work with ReactJS, you will find that Props and State are heavily used. Like Props, State is used to store component information, the difference is that State is a component of component and Props is value passed from outside to component. We usually update the state right in the component with the command setState () to re-render the component, So in case we want to change the state from the parent component, how to solve it ????
A fairly simple solution is to use Refs in React. Let’s take a look at the example below to see more clearly !!!
2. For example:
We will perform an example that changes the name of a child component by performing a button click on the parent component.
Come on go !!!
First, we will create a component named ChildComponent whose state is name with an initial value of ” Diem My “. The component will display the text “My name is” and the name is taken from the state.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | class ChildComponent extends React.Component { state = { name: "Diem My" }; render() { return ( <div> My name is <span style={{ color: "red" }}>{this.state.name}</span> </div> ); } } |
Next, to make a state change, we will create a function changeName () and use this.setState () to change the state:
1 2 3 4 5 6 | changeName = () => { this.setState({ name: "Thu Trang" }); }; |
ChildComponent now has a state and a function that changes state, currently it will look like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | class ChildComponent extends React.Component { state = { name: "Diem My" }; changeName = () => { this.setState({ name: "Thu Trang" }); }; render() { return ( <div> My name is <span style={{ color: "red" }}>{this.state.name}</span> </div> ); } } |
Next, we will create a parent component named ParentComponent that will not yet have ChildComponent , a button to make name changes when clicked, and a temporary function that will be blank for a moment we will handle to change the state in ChildComponent :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | class ParentComponent extends React.Component { handleClick = () => { // change state of ChildComponent }; render() { const buttonStyle = { color: "white", backgroundColor: "DodgerBlue", padding: "8px", fontFamily: "Arial", borderRadius: "3px" }; return ( <div className="App"> <h1>Update state from parent component</h1> <h2>Click Change Button to see result!</h2> <ChildComponent /> <br /> <button onClick={this.handleClick} style={buttonStyle}>Change name</button> </div> ); } } |
It’s time we need to use Refs for ChildComponent named childRef . Refs help us to refer to the ChildComponent node using. current . It will print out everything related to ChildComponent and also changeName () . Now we just need to use changeName () in handleClick () to make state changes.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | class ParentComponent extends React.Component { constructor(props) { super(props); this.childRef = React.createRef(); } handleClick = () => { // change state of ChildComponent console.log("childRef node:", this.childRef.current); this.childRef.current.changeName(); }; render() { const buttonStyle = { color: "white", backgroundColor: "DodgerBlue", padding: "8px", fontFamily: "Arial", borderRadius: "3px"[](https://codesandbox.io/s/updatestatefromparentcomponent-dyd24) }; return ( <div className="App"> <h1>Update state from parent component</h1> <h2>Click Change Button to see result!</h2> <ChildComponent ref={this.childRef} /> <br /> <button onClick={this.handleClick} style={buttonStyle}> Change name </button> </div> ); } } |
Tada, so our example is complete. You can see the code and run here, CodeSanbox
3. Conclusion
Now changing the State by action outside the component has become simple when there are Refs right?