To make a child component update its parent’s state, the first step is something that you’ve seen before: you must define a state-changing method on the parent.



Select Child.js.

Look at Child‘s render function. It’s similar to the last lesson, but you can see a <select> dropdown menu that wasn’t there before.

Click Run. Try selecting different names from the dropdown menu in the browser.

It doesn’t work! When you select a name, that name is supposed to replace “Frarthur” on the screen.

Look at line 8. Notice that the name inside of the <h1></h1> is equal to this.props.name. In order to make the dropdown menu change the <h1></h1>, you will need the dropdown menu to change the value of this.props.name!


How can you change Child‘s this.props.name?

Open Parent.js and look at line 13.

Parent renders a <Child />, passing in a name prop. This name prop is the same value that the <Child /> displays in its <h1></h1>.

You need Child‘s dropdown menu to change Parent‘s this.state.name! That will cause <Child /> to get passed a new name prop, which will change the name displayed on the screen.

In Parent.js, define a new function that can change this.state.name:

changeName(newName) { this.setState({ name: newName }); } render() { // ... }

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?