title: How to increment a state in React?
body: <p>I am learning React and have been given a simple challenge: to make a counter increment when a button is clicked.</p>
  
  <p>The problem is my component seems to treat the numbers as strings and concatenates them, not increments them. Eg, if my starting number is 2 and I click 'Add 1' I get '21' instead of the expected result, '3'.</p>
  
  <p>I tried to Google a way to mark them as integers, but had no luck.</p>
  
  <p>My code is:</p>
  
  <pre><code> var CountComponent = React.createClass({
  
      resetCount: function() {  
          this.setState({  
              count: '0'
          })
      },
  
      addOne: function() { 
          this.setState({
              count: this.state.count + 1
          })
      },
  
      getInitialState: function() { 
          return {
              count: '0'
          }
      },
  
      render: function() {
          return (
              &lt;div&gt;
                  &lt;h1&gt;Count {this.state.count}&lt;/h1&gt;
                  &lt;button onClick={this.addOne}&gt;Add 1&lt;/button&gt;
                  &lt;button onClick={this.resetCount}&gt;Reset&lt;/button&gt;
              &lt;/div&gt;
          )
      }
  });
  
  ReactDOM.render(
      &lt;CountComponent /&gt;,
      document.getElementById('app') 
  );
  </code></pre>
  
  <p>Would anyone know where I've gone wrong here?</p>
  
  <p>Weirdly enough, I did find an example doing something very similar, but it seems to work <a href="https://codepen.io/ajcbrown820/pen/eZdWaj" rel="nofollow noreferrer">https://codepen.io/ajcbrown820/pen/eZdWaj</a>. I can't see the differences to mine.</p>