title: changing the value onclick in react-js
body: <p><a href="https://i.stack.imgur.com/YTMJj.png" rel="nofollow noreferrer">output look like this</a> when i click change text button it should replace the text (TodoApplication) with that value if it is empty value(should replace empty heading) the value was not changing in this code! can anyone edit the code to get a solution!</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var TodoApp = React.createClass({
    getInitialState: function() {
  return {items: []};
    },
    updateItems: function(newItem) {
  var allItems = this.state.items.concat([newItem]);
  this.setState({items: allItems});
    },
    render: function() {
  return (
    &lt;div&gt;
      &lt;TodoBanner/&gt;
      &lt;TodoList items={this.state.items}/&gt;
  
      &lt;TodoForm onFormSubmit={this.updateItems}/&gt;
    &lt;/div&gt;
  );
    }
  });
  
  var TodoBanner = React.createClass({
    render: function() {
  return (
    &lt;div className="container"&gt;
      &lt;h3&gt;TODO Application&lt;/h3&gt;
    &lt;/div&gt;
  );
    }
  });
  
  var TodoList = React.createClass({
    render: function() {
  var createItem = function(itemText) {
    return (
      &lt;TodoListItem&gt;{itemText}
      &lt;/TodoListItem&gt;
    );
  };
  return &lt;ul&gt;{this.props.items.map(createItem)}&lt;/ul&gt;;
    }
  });
  
  var TodoListItem = React.createClass({
    render: function() {
  return (
    &lt;li&gt;{this.props.children}&lt;/li&gt;
  );
    }
  });
  
  var TodoForm = React.createClass({
    getInitialState: function() {
  return {item: ''};
    },
    handleSubmit: function(e) {
  e.preventDefault();
  this.props.onFormSubmit(this.state.item);
  this.setState({item: ''});
  React.findDOMNode(this.refs.item).focus();
  return;
    },
    onChange: function(e) {
  this.setState({item: e.target.value});
    },
    render: function() {
  return (
    &lt;div className="container"&gt;
      &lt;form onSubmit={this.handleSubmit}&gt;
        &lt;input type='text' ref='item' onChange={this.onChange} value={this.state.item}/&gt;
        &amp;nbsp;
        &lt;input type='submit' value='Add' className="btn btn-success"/&gt;&lt;br/&gt;
        &lt;input type='text' ref='item' onChange={this.onChange} value={this.state.item}/&gt;
        &amp;nbsp;
        &lt;input type='submit' value='Change Text' className="btn btn-success"/&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  );
    }
  });
  
  ReactDOM.render(
    &lt;TodoApp/&gt;, document.getElementById('todo'));       </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"&gt;&lt;/script&gt;
  
  &lt;div id="todo" /&gt;</code></pre>
  </div>
  </div>
  </p>