by Johny Thomas

How to change the state of a child component from its parent in React

VSHQltaIS4A-WnEWL9SHecUzng1v8VSqbSDM
Photo by Clément H (@clemhlrdt) on Unsplash

We will be building a simple React app which shows the real name of a superhero on a button click.

Let’s get started.

First, we will create a Superhero component with a name attribute in state. This component will render that name first.

dXk6uX7LQOfLuMWqTAqOZSd7obn-GESaMUkA

Now let’s create a function changeName() in the Superhero component. This function will change the name in state to the actual name of the superhero.

-3-r39-jq60PNryomLCF7ShV4sHJEOhBBDtl

Now we have the Superhero component which shows the superhero name and a function which updates the name to his real name.

The complete Superhero component will look like this:

yHRO4tad52gX20O9uRC38b-oSgiRe5VK9f6m

Now let’s create the App component which will render this Superhero component and a button. When we click the button it shows the real superhero name.

vlplStkM5jX8jKzIgUuOZB3ezux7mORUNvMy

We have added a function handleClick() which will get called when the user clicks the button. We need to figure out a way to update the state of the child component, that is the Superhero component.

We have created a function changeName() in the Superhero component. This function will show the real name of the superhero. If we can call this function from the App component, our work is done. So we will call this function.

Here is where refs come to our rescue.

Let’s create a ref of the Superhero component in the App component. Here is the code for doing that.

gYY7kDmcNbMT1flktY70lOgXYmqRZAjRErUN

Here we have created a ref using React.createRef() method and attached the ref to the Superhero component using the ref attribute.

Now we will be able to refer the Superhero node using this.superheroElement.current. We will also be able to call the changeName() function in the Superhero component using this.superheroElement.current.changeName().

Let’s update our handleClick() function in our App component to call the changeName() function.

Our handleClick() function will look like this.

Qx7hBSPn7YlzdtGpDSC7Dcr4bP6wR5CKGFOr

You can check out the complete code in the below sandbox.

CodeSandbox
CodeSandbox is an online editor tailored for web applications.codesandbox.io

Now we have learned how to update the state of a child component from a parent component ?. I hope this was helpful.