<main></main>

input {
  display:block;
  margin: 10px;
}

var MultiInput = React.createClass({
  // A MultiInput's state is the text shared between the inputs. 
  // Let's start with getInitialState to provide initial values
  getInitialState: function() {
    return { text: "type something..." };
  },
  
  // The state is changed every time a user types something
  // in a box to reflect the new value. 
  // The function valueChanged below handles that change:
  valueChanged: function(e) {
    this.setState({ text: e.target.value });
  },
  
  // Finally we modify render to bind the value and event
  // handlers to the component
  render: function() {
    return <div>
        <input type="text" value={this.state.text} onChange={this.valueChanged} />
        <input type="text" value={this.state.text} onChange={this.valueChanged} />
        <input type="text" value={this.state.text} onChange={this.valueChanged} />
        <input type="text" value={this.state.text} onChange={this.valueChanged} />
        <input type="text" value={this.state.text} onChange={this.valueChanged} />
      </div>
  }
});

ReactDOM.render(<MultiInput />, document.querySelector('main'));