4 / Receive the Event Handler


#1

Hi,

I’m stuck and don’t know what to do. https://www.codecademy.com/courses/react-102/lessons/child-updates-parents-state/exercises/child-parent-receive-handler?action=resume_content_item

These are the instructions>

Inside of Child 's render function, give <select> a new attribute.

Make the attribute’s name onChange . This will create an event listener .

Make the attribute’s value equal to the function that you passed in from Parent.js . If you can’t remember what prop name you used, then check Parent 's render function.

this is my child>

 <h1>
          Hey my name is {this.props.name}!
        </h1>
        <select id="great-names" onChange={this.changeName}>
... </select>

and the parent>

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

  render() {
    return <Child name={this.state.name} onChange={this.changeName} />
  }
}

I stared at the screen 30 minutes and don’t know what to do, please help!

Many thanks and regards


#2

Hi, @straychris

I can’t follow to the link, that you provided, but I have few suggestions.

  1. Your Child has this.changeName, but changeName is defined in Parent, so should be visible by props : this.props.changeName.

Not sure, but I guess you need to add to select one more attribute value that equals to the name that you passed from Parent:

<select id="great-names" onChange={this.props.changeName} value={this.props.name}>

Now your element knows how to update state with new name using onChange attribute and what option should be selected with value attribute.

Hope these points will help you with solution.