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() {
  // ...
}