score:5

Accepted answer
var Hello = React.createClass({
  render: function() {
    return <div>{this.props.message}</div>;
  }
});

var Form = React.createClass({
    render: function() {
    return (
      <form onSubmit={this.props.onSubmit} className="adwords-ad">
        <h2>Enter your Headline</h2>
        <input 
          onChange={this.props.onChange} 
          value={this.props.value} 
          type="text" 
          required 
        />
        <input type="Submit" />
      </form>
    );
  }
});

var App = React.createClass({

  getInitialState: function() {
    return { message: "", savedMessage: "" };
  },

  onSubmit: function(e) {
    e.preventDefault();
    this.setState({
      message: "", 
      savedMessage: this.state.message
    });     
  },

  onChange: function(e) {
    this.setState({message: e.target.value});
  },

  render: function() {
    return (
        <div> 
          <Form 
            onSubmit={this.onSubmit} 
            onChange={this.onChange} 
            value={this.state.message} 
          />
          <Hello message={this.state.savedMessage} />
      </div>
    )
  }
});

ReactDOM.render(<App></App>, document.getElementById('container'));

Related Query

More Query from same tag