title: ReactJS: onClick change element
body: <p>I've just started learning React and have a question. </p>
  
  <p>I want to do the following:</p>
  
  <p>If a user clicks on a paragraph I want to change the element to an input field that has the contents of the paragraph prefilled. 
  (The end goal is direct editing if the user has certain privileges) </p>
  
  <p>I'm come this far but am totally at a loss.</p>
  
  <pre><code>var AppHeader = React.createClass({
      editSlogan : function(){
          return (
              &lt;input type="text" value={this.props.slogan} onChange={this.saveEdit}/&gt;
           )
      },
      saveEdit : function(){
          // ajax to server
      },
      render: function(){
          return (
              &lt;header&gt;
                  &lt;div className="container-fluid"&gt;
                      &lt;div className="row"&gt;
                          &lt;div className="col-md-12"&gt;
                              &lt;h1&gt;{this.props.name}&lt;/h1&gt;
                              &lt;p onClick={this.editSlogan}&gt;{this.props.slogan}&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/header&gt;
          );
      }
  });
  </code></pre>
  
  <p>How can I override the render from the <code>editSlogan</code> function? </p>