title: using innerHTML with React
body: <p>I've made a mini calculator using <code>React</code>. </p>
  
  <p>It works, but I'm not sure I understand why. Could someone point me towards the concept that I'm not fully grasping here. </p>
  
  <p>My code's below. </p>
  
  <p>Here's what I expected:
  After the first operation (first time the <code>getResult</code> function is executed) I expected to have to write a conditional in the <code>clearingState</code> function to reset the <code>innerHTML</code> of <code>&lt;div id="display"</code> to <code>{this.state.string}</code> as the <code>getResult</code> function sets it to the <code>updateResult</code> variable. Yet, it works without me having to do this adjustment. I don't understand why.</p>
  
  <p>Thanks in advance..</p>
  
  <pre><code>&lt;script type="text/babel"&gt;
    var Calculator = React.createClass({
        createString: function(event){
          var previousState = this.state.string;
          var target = event.target;
          var number = target.innerHTML;
          var newState = previousState+number;
          this.setState({string: newState});
        },
        clearingState: function(event){
          var newState = "";
          this.setState({string: newState});
        },
        getResult: function(){
          var stringResult = this.state.string;
          var updateResult = eval(stringResult);
          return document.getElementById("display").innerHTML = updateResult;
        },
        getInitialState: function(){
          return ({
            string: ""
          })
        },
        render: function(){
            return (
                &lt;div&gt;
                  &lt;div id ="display"&gt;{this.state.string}&lt;/div&gt;
                  &lt;div id="main"&gt;
                      &lt;div className="key zero" onClick={this.createString}&gt;0&lt;/div&gt;
                      &lt;div className="key one" onClick={this.createString}&gt;1&lt;/div&gt;
                      &lt;div className="key two" onClick={this.createString}&gt;2&lt;/div&gt;          
                      &lt;div className="key three" onClick={this.createString}&gt;3&lt;/div&gt;
                      &lt;div className="key four" onClick={this.createString}&gt;4&lt;/div&gt;
                      &lt;div className="key five" onClick={this.createString}&gt;5&lt;/div&gt;
                      &lt;div className="key six" onClick={this.createString}&gt;6&lt;/div&gt;
                      &lt;div className="key seven" onClick={this.createString}&gt;7&lt;/div&gt;
                      &lt;div className="key eight" onClick={this.createString}&gt;8&lt;/div&gt;
                      &lt;div className="key nine" onClick={this.createString}&gt;9&lt;/div&gt;
                      &lt;div className="key d" onClick={this.createString}&gt;.&lt;/div&gt;
                      &lt;div className="key C" onClick={this.clearingState}&gt;C&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div id="operators"&gt;
                      &lt;div className="key mp" onClick={this.createString}&gt;*&lt;/div&gt;
                      &lt;div className="key dv" onClick={this.createString}&gt;/&lt;/div&gt;
                      &lt;div className="key ad" onClick={this.createString}&gt;+&lt;/div&gt;
                      &lt;div className="key sb" onClick={this.createString}&gt;-&lt;/div&gt;
                      &lt;div className="key eq" onClick={this.getResult}&gt;=&lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
            );
        }
    });
  
    ReactDOM.render(
      &lt;Calculator/&gt;,
      document.getElementById('calculator')
    )
  </code></pre>
  
  <p></p>