How to Update Nested State Properties in React

React is a popular JavaScript library for building user interfaces. One common task in React is updating nested state properties. In this blog post, we will explore different approaches to update nested state properties in React.

1. Using the spread operator

The spread operator allows us to create a new object or array by copying the existing one and applying changes to it. We can use the spread operator to update nested state properties in React.

const [state, setState] = useState({
  nested: {
    property: 'initial value'
  }
});

const updateState = () => {
  setState(prevState => ({
    ...prevState,
    nested: {
      ...prevState.nested,
      property: 'new value'
    }
  }));
};

2. Using the Object.assign() method

The Object.assign() method is another way to update nested state properties in React. It allows us to merge the properties of multiple objects into a target object.

const [state, setState] = useState({
  nested: {
    property: 'initial value'
  }
});

const updateState = () => {
  setState(prevState => Object.assign({}, prevState, {
    nested: Object.assign({}, prevState.nested, {
      property: 'new value'
    })
  }));
};

3. Using the immer library

The immer library provides a simpler way to update nested state properties in React. It allows us to write code that looks like we’re directly mutating the state, but it actually creates a new immutable state behind the scenes.

import produce from 'immer';

const [state, setState] = useState({
  nested: {
    property: 'initial value'
  }
});

const updateState = () => {
  setState(produce(draft => {
    draft.nested.property = 'new value';
  }));
};

These are three different approaches to update nested state properties in React. Choose the one that suits your needs and coding style. Happy coding!