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 component 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 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!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With