FAQ: Child Components Update Their Parents' state - Receive the Event Handler

First of all, you’re using an arrow function. This will actually solve the bind() problem that you always need to do, but as stated in the React docs, it’s an experimental feature meaning it’s just better to stick to the old fashioned methods for now and bind it in the constructor

Second of all, it’s always cleaner and more maintainable for our event handlers to be named methods

The problem I have is with the e argument of handleChange. I understand that when any event occurs in the browser, an event object is created automatically. But then how does handleChange know that that event object is what it should receive as the argument e?

handleChange(e) {
  const name = e.target.value;
  this.props.onChange(name);
}

How it is triggered via {this.handleChange}:

render() {
    return (
      <div>
        <h1>
          Hey my name is {this.props.name}!
        </h1>
        <select id="great-names" onChange={this.handleChange}>

I agree with Karlj.38 this seems too much.

I had some issues with this.
In the end my code was identical to the correct code, except I didnt have two blank lines separating some of my code. Once I added the blank lines, which had no impact on the code, it then passed. Very strange.