title: React: duplicated item in list
body: <p>I'm an absolute beginner in React. I created a simple app to show an integer list on a page. There is an 'add item' button and the app happens a new integer to the list when user presses the button. When I press the button, the new integer is added twice to the list. Can anyone help?</p>
  
  <pre><code>import React from 'react';
  
  class App extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        items: [],
        idx: 0
      }
  
      this.addItem = this.addItem.bind(this);
    }
  
    render() {
      return &lt;div&gt;&lt;h1&gt;Learning app&lt;/h1&gt;
      &lt;ul&gt;
        {this.state.items.map(item =&gt; (
          &lt;li key={item}&gt;{item}&lt;/li&gt;
        ))}
      &lt;/ul&gt;
      &lt;button onClick={this.addItem}&gt;Add Item&lt;/button&gt;
      &lt;/div&gt;;
    }
  
    addItem() {
      this.setState((state, props) =&gt; {
        state.items.push(state.idx)
  
        return {
          items: state.items,
          idx: state.idx + 1
        }
      })
    }
  }
  
  export default App;
  </code></pre>
  
  <p>When I put this inside addItem</p>
  
  <pre><code>    this.state.items.push(this.state.idx);
      this.setState({
        idx: this.state.idx + 1
      })
  </code></pre>
  
  <p>it works without any issue.</p>
  
  <p>I deliberately use setState with arrow function for experiment purpose. Did I do something wrong?</p>