title: Simple React component throwing "too much recursion" error
body: <p>I came across this barebones React component in a recent question. I was playing around with it, and tried to add a new item (an object) to the array of existing objects in <code>state</code>. But it throws "too much recursion" error. </p>
  
  <p>I've looked at other questions with similar problems in React, but I'm not invoking <code>this.setState()</code> in <code>componentDidMount()</code>. Neither am I rendering the same component from it's <code>render()</code> method. So, I'm not sure what causes this error.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>class App extends React.Component {
        constructor(props) {
          super(props);
          this.state = {
            Items: [
              {w:1, b:8, name: 'banana'},
              {w:7, b:3, name:'apple'},
              {w:3, b:5, name:'kiwi'},
              {w:6, b:3, name:'strawberry'},
              {w:5, b:1, name:'orange'}]
          };
          this.addItem = this.addItem.bind(this);
          //this.handleAdd = this.handleAdd.bind(this);
        }
    
      // handleAdd() {
      //   this.addItem(10, 5, "mangoes");
      // }
  
      addItem(){
        this.setState(prevState =&gt; {
          Items: [...prevState.Items, {w: 20, b: 3, name: "mangoes"}];
        });
      }
    
    render() {
      return (
        &lt;div&gt; 
         &lt;button className="btn btn-default" onClick={this.addItem}&gt;Add&lt;/button&gt;
         &lt;ul&gt;
           {this.state.Items.map(e =&gt; &lt;li key={e.name}&gt;{`${e.name} ${e.w}`}&lt;/li&gt;)}
          &lt;/ul&gt;
        
        &lt;/div&gt;
      )
    }
  }
  
  ReactDOM.render(&lt;App/&gt;, document.getElementById('root'));
    
    </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.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="root"&gt;
    
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The initial set of items that was set in the constructor does render at the start, but the "add" button doesn't seem to be working.</p>
  
  <p>Additionally, along with the recursion error, I came across "RegExp too big" a few times, while I was testing this.</p>