Updating Objects with setState in React

In React, setState is used to update the state of a component. When dealing with objects as state properties, it’s essential to understand how to update them correctly to avoid unexpected behavior. In this tutorial, we’ll explore the different ways to update objects using setState.

Introduction to setState

Before diving into updating objects, let’s quickly review how setState works. setState is an asynchronous method that updates the state of a component. It takes two arguments: the first is the new state, and the second is an optional callback function.

Updating Simple Objects

To update a simple object property, you can’t directly use dot notation with setState. Instead, you need to create a copy of the original object and then update the desired property. There are several ways to achieve this:

Method 1: Using Object.assign

this.setState(prevState => {
  let jasper = Object.assign({}, prevState.jasper);
  jasper.name = 'someothername';
  return { jasper };
})

Method 2: Using Spread Syntax

this.setState(prevState => ({
  jasper: { ...prevState.jasper, name: 'something' }
}))

Both methods create a shallow copy of the original object and then update the desired property.

Updating Nested Objects

When dealing with nested objects, you need to create a copy of each level of nesting. Here’s an example:

this.state = {
  food: {
    sandwich: {
      capsicum: true,
      crackers: true,
      mayonnaise: true
    },
    pizza: {
      jalapeno: true,
      extraCheese: false
    }
  }
}

To update the extraCheese property of the pizza object:

this.setState(prevState => ({
  food: {
    ...prevState.food,
    pizza: { ...prevState.food.pizza, extraCheese: true }
  }
}))

Updating Arrays of Objects

When updating an array of objects, you can use the map method to create a new array with the updated object:

this.state = {
  todoItems: [
    {
      name: 'Learn React Basics',
      status: 'pending'
    }, {
      name: 'Check Codebase',
      status: 'pending'
    }
  ]
}

To update the status property of a specific todo item:

let key = 2;
this.setState(prevState => ({
  todoItems: prevState.todoItems.map(
    el => el.key === key ? { ...el, status: 'done' } : el
  )
}))

Best Practices

When updating objects with setState, keep the following best practices in mind:

• Always create a copy of the original object to avoid mutating the state directly.
• Use shallow copying methods like Object.assign or spread syntax for simple objects.
• For nested objects, create a copy of each level of nesting.
• When updating arrays of objects, use the map method to create a new array with the updated object.

By following these guidelines and examples, you’ll be able to update objects with setState in React like a pro!