Improved example of React data-binding

react-data-binding.js

/*
 * Improving upon example at: http://engineering.paiza.io/entry/2015/03/12/145216
 */

class MyApp extends React.Component {
  constructor(props) {
    super(props);

    this.handleChange = this.handleChange.bind(this);
    this.state = {
      firstName: this.props.firstName,
      lastName: this.props.lastName,
    };
  }

  handleChange({ target }) {
    this.setState({
      [target.id]: target.value,
    });
  }

  render() {
    const fullName = `${this.state.firstName} ${this.state.lastName}`;

    return <div>
      First name:&nbsp;
      <input
        id="firstName"
        onChange={this.handleChange}
        value={this.state.firstName}
      /><br />

      Last name:&nbsp;
      <input
        id="lastName"
        onChange={this.handleChange}
        value={this.state.lastName}
      /><br />

      Full name: {fullName}
    </div>
  }
}

React.render(<MyApp firstName="Taro" lastName="Yamada" />, document.body);