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:

this.state = {
    newList: {
      category: '',
      items: []
    },
    lists: [],
    itemText: ''
};

"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.

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: ''
    })
  }
}

This method receives "index" as a parameter from a stateless ponent that manages the rendering of the lists.

The problem is:

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 undefined. I have tried to pre-fill the array with some values, but it seems like it just cannot get it inside the "newList" object.

Thank you very much for your help and I hope you have a great day!

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:

this.state = {
    newList: {
      category: '',
      items: []
    },
    lists: [],
    itemText: ''
};

"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.

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: ''
    })
  }
}

This method receives "index" as a parameter from a stateless ponent that manages the rendering of the lists.

The problem is:

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 undefined. I have tried to pre-fill the array with some values, but it seems like it just cannot get it inside the "newList" object.

Thank you very much for your help and I hope you have a great day!

• javascript
• arrays
• reactjs
• state

• Can you show the code please that puts items into lists initially? – Matthew Herbst Commented Dec 13, 2018 at 17:43
• Sure! ` createCategory() { if (this.state.newList.category) { let existingLists = new Array(...this.state.lists) let newList = this.state.newList existingLists.push(newList) this.setState ({ lists: existingLists, newList: { category: '' } }) } } ` – Joel Commented Dec 13, 2018 at 18:43

1 Answer 1

I already solved it. I wasn't pushing an empty array into the object on the list creation method.

createCategory() {

if (this.state.newList.category) {

  let existingLists = new Array(...this.state.lists)
  let newList = {...this.state.newList, items: new Array(0)}

  existingLists.push(newList)

  this.setState ({
    lists: existingLists,
    newList: {
      category: ''
    }
  })
 }
}

Thank you all very much for your help!