How can I update groceries item(set completed to True) in my toggleGroceryCompleteness method?
I tried this.setState({groceries[groceryIndex]:{completed:true});
constructor(props) {
super(props);
this.state = {
groceries: [
{
name: "Apples",
completed: false
}
],
newGroceryName: ""
};
toggleGroceryCompleteness(groceryIndex) {
console.log(groceryIndex);
console.log(this.state.groceries[groceryIndex]);
}
Since you're editing the value of a previously set state, you should use this definition of setState
this.setState((prevState, props) => {
const newGroceries = prevState.groceries.slice()
newGroceries[groceryIndex].completed = true
return { ...prevState, groceries: newGroceries }
})
This takes the value of the groceries state array from before the setState call and assigns it to a new variable to be modified, accessing the given index and sets the completed property to true. Then returns a new object/state containing everything from the previous state value but a modified groceries property which is the new modified version.
newGroceries is a global variable—did you forget const =?; 2. This modifies the state directly. You probably meant to make a copies of the groceries array before modifying it: const newGroceries = prevState.groceries.slice();.
props as argument in this arrow function?props of the component is the second argument passed to this extended definition of setState. Whether you need it or not is up to you obviously but its there if you want it