title: Updating state array length in React
body: <p>I created a simple react to do list. But I want to display how many items are on that list. Every time I click submit I want to update totalItems.</p>
  
  <ol>
  <li>Items - is array of list items. </li>
  <li>Total Items - at first 0 because i'am not looking to store values. Later it becomes state.items.length.</li>
  </ol>
  
  <p>My Thoughts: Using Componentdidmount() Did worked but it had many problems. First submit didn't update, first delete didn't update. There has to be a better way. But I'm out of ideas.</p>
  
  <p>My Code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>this.state = {
    items: [],
    totalItems: 0,
  };
  this.addItem = this.addItem.bind(this);
  this.deleteItem = this.deleteItem.bind(this);
  
  componentDidMount() {
    if (this.state.items.length &gt; 0) {
      this.setState({
        totalItems: this.state.items.length,
      })
  
    } else {
      this.setState({
        totalItems: 0
      })
    }
  
    this.forceUpdate();
  }
  addItem(event) {
    this.componentDidMount();
  }
  deleteItem(key) {
    this.componentDidMount();
  }
  render() {
    return ( &lt;
      div &gt;
      Total Items {
        this.state.totalItems
      } &lt;
      /div&gt;
    )
  }</code></pre>
  </div>
  </div>
  </p>