title: How to add to state array in React
body: <p>I am making a simple to-do list app in React. I have 3 states, inputText (the task the user enters), triggerAnimation(to trigger animations), and tasks (the list of tasks user has entered). However I don't know how to update the tasks state (which is an array) to push the new tasks. Here is the code. </p>
  
  <pre><code>import React, { Component } from 'react';
  import logo from './logo.svg';
  import './App.css';
  
  class App extends Component {
  
    constructor(props) {
      super(props);
  
      this.state = {
        inputText: '',
        triggerAnimation: '',
        tasks: []
      }
    }
  
  //The function triggered by button which sends the task the user has entered to the tasks array state:
  
    addItem() {
      document.querySelector("#textfield1").value = ""
      this.setState({ 
        triggerAnimation: 'fadein', tasks: 
        this.state.inputText 
      }) 
    }
  
  
  
    render() {
      //Where User enters task:
      return (
        &lt;div className="App"&gt;
          &lt;main&gt;
            &lt;div className="enterTask"&gt;
              &lt;input type="text" className="inputclass" id="textfield1" 
                placeholder='Enter a task.' 
                onChange={event =&gt; this.setState({ 
                  inputText: event.target.value })} 
                onKeyPress={event =&gt; {
                  if(event.key === 'Enter') {
                    this.addItem();
                  }
                 }} 
               /&gt;
              &lt;br /&gt;
              &lt;br /&gt;
              &lt;button className="button" 
                onClick={() =&gt; this.addItem()} data-
                  toggle='fadein' data-target='list'&gt;+
              &lt;/button&gt;
           &lt;/div&gt;
  
  
      &lt;!-- Where tasks will appear: --&gt;
  
           &lt;div className="log"&gt;
             &lt;p className='list'&gt;
               &lt;span class={this.state.triggerAnimation}&gt;  
                 {this.state.tasks}
               &lt;/span&gt;
             &lt;/p&gt;
             &lt;button className="button"&gt;-&lt;/button&gt;
           &lt;/div&gt;
         &lt;/main&gt;
       &lt;/div&gt;
      )
    }
  }  
  
  export default App;
  </code></pre>