title: How to disable buttons on ReactJS properly?
body: <p>I am learning ReactJS. I wrote a web app that should show an input text and a button 'Confirm', and when pressed it shows a second input text with a button 'Go back' which removes the new input. When the second one is showed, the first input and the first button are disabled.</p>
  
  <p>However, my current script is not accepted. I'm having problems with passing functions as prop to the function FormRender and with indicating in the FormRender object itself the property "disabled" (it claims to have found "unexpected token").</p>
  
  <p>Are there any better approaches?</p>
  
  <pre><code>function FormRender (props) {
      return (
          &lt;div&gt;
              &lt;input type = "text" placeholder = {this.props.holder} {this.props.disable} /&gt;
              &lt;button onClick = {this.props.Click()} {this.props.disable} &gt; {this.state.value} &lt;/button&gt;
          &lt;/div&gt;
      );
  };
  
  var R  = React.createClass ({
      getInitialState: function () {
          return { names: [], disable: false }
      },
      update: function () {
          return this.state.disable ? "disabled" : "";
      },
      componentDidMount: function () {
          var a = this.state.names;
          a.push ( &lt;FormRender holder = 'Name' value = 'Confirm' Click = {this.In}, disable: {this.update} /&gt; );
          this.setState ( { names: a } );
          this.forceUpdate();
      },  
      In: function () {
          var a = this.state.names;
          this.setState ( { disable: true } );
          a.push ( &lt;FormRender holder = 'Surname ' value = 'Back' Click = {this.Out} disable: "" /&gt; );
          this.setState ( { names: a } );
          this.forceUpdate();
      },
      Out: function () {
          var a = this.state.names;
          this.setState ( { disable: false } );
          a.splice(a.length-1,1);
          this.setState ( { names: a } );
          this.forceUpdate();
      },  
      render: function () {
          return (
              &lt;div&gt;
                  {this.state.names}
              &lt;/div&gt;
          );
      }
  });
  </code></pre>