How to update nested object state in React

Question

I have multiple checkbox svgs which i'm mapping over which removes the inner tick icon when I manually set either of the isSelected states to false. I want to remove/add the tick icon svg when I press the checkbox in my app. Im unsure where Im currently going wrong in my logic. It works correctly when I manually change the isSelected state to false but not when I press the checkbox.

State:

  const [option, setOption] = useState([
    { permission: 'Can manage users', isSelected: true },
    { permission: 'Can place orders', isSelected: true },
  ]);

Component:

      {option.map(({ permission, isSelected }, i) => (
          <CheckboxIcon
            viewed={isSelected}
            onPress={() =>
              setOption(prev => {
                prev[i] = { ...prev[i], isSelected: !isSelected };
                return prev;
              })
            }
          />

Checkbox svg:

const CheckboxIcon = ({
  width = 26,
  height = 26,
  viewed,
  fill = Colors.success,
  tickAccountSize,
  onPress,
}) => (
    <Svg
      xmlns="http://www.w3.org/2000/svg"
      overflow="visible"
      preserveAspectRatio="none"
      width={width}
      height={height}>
      <Path
        d="M1 1h24v24H1V1z"
        vectorEffect="non-scaling-stroke"
        fill="transparent"
      />
      <IconContainer onPress={onPress} width={width} height={height}>
        {viewed && <TickIcon tickAccountSize fill={fill} />}
      </IconContainer>
    </Svg>
);

Answer 1

The problem is in onPress, you are mutating the option state directly. Because of that the option state keeps the same reference in memory. Now even if you change something, react does not know if it should re-render and decides to nor re-render. The solution to this problem is to create a copy of the state, so that we have a new reference to work with. In this copy we can modify it as we like and then set the new reference as option state. Now react re-renders since it detects a new reference.

The code could look like this:

            onPress={() =>
              setOption(oldOption => {
                const newOptions = [...oldOption];
                newOptions[i] = { ...newOptions[i], isSelected: !newOptions[i].isSelected};
                return newOptions;
              })

Answer 2

In the setOptions functions you are returning the same state. Also mutating the state which is not good. You can change it like below.

 setOption(option => {
                newOption = [...option];
                newOption[i] =  !newOption[i].isSelected ;
                return newOption;
              })

I haven't tested this locally but conceptually will look like this. You can create it in codesandbox then I can fix it for you.

Answer 3

You should consider to use Immutability Helpers for best performance https://reactjs.org/docs/update.html

Example:

import update from 'react-addons-update';

const newData = update(myData, {
  x: {y: {z: {$set: 7}}},
  a: {b: {$push: [9]}}
});

Answer 4

You have to update the complete object. Your approach is to modify the object.

AFAIK React useState do not track nested objects (also arrays). This will be triggered by replacing the state.

In your case for example:

      {option.map(({ permission, isSelected }, i) => (
      <CheckboxIcon
        viewed={isSelected}
        onPress={() =>
          setOption(prev => prev.splice(i, 1,  {
                    ...prev[i],
                    isSelected: !isSelected
                 })
        }
      />

With splice we insert at index i, remove 1 item (the old one) and insert the new object. Afterwards a new array is returned

In this case with splice we would hold the position and update the specified element.

Also here has someone write a good explanation https://stackoverflow.com/a/43041334/19600120