title: How can I use an empty array declared on React's initial state?
body: <p>I am trying to create an application that shows a list of lists. I am currently stuck at trying to access an empty array I declared when I first declared the initial state. Here is the state I declared:</p>
  
  <pre><code>this.state = {
      newList: {
        category: '',
        items: []
      },
      lists: [],
      itemText: ''
  };
  </code></pre>
  
  <p>"newList" stands for the item I am pushing into the "lists" array, which holds all of the lists, as it shows, I use this method to push a "newList" object into the "lists" array. The "itemText" value serves as a placeholder for the text that will input into the list, and "category" names the list.</p>
  
  <pre><code>createListItem(index) {
  
    //if the value is not empty
    if (this.state.itemText) {
  
      //create a temporary variable with the list item determined by the index
      let tempList = this.state.lists[index]
  
      //assign another temporary variable for the "items" array in the list item
      let itemsArray = tempList.items
  
      //create temporary variable that holds the text that will be pushed into the "items" array
      let newValue = this.state.itemText
  
      itemsArray.push(newValue)
  
      this.setState ({
        lists: tempList,
        itemText: ''
      })
    }
  }
  </code></pre>
  
  <p>This method receives "index" as a parameter from a stateless component that manages the rendering of the lists.</p>
  
  <p>The <strong>problem</strong> is: </p>
  
  <p>I am trying to access the "items" array of the "newList" item that I pushed into the "lists" array, because as it is right now, it is <em>undefined</em>. I have tried to pre-fill the array with some values, but it seems like it just cannot get it inside the "newList" object.</p>
  
  <p>Thank you very much for your help and I hope you have a great day!</p>