React Hooks Update Nested Array

Question

I have an array of object named as options in the state using useState hook I just want to update a nested array object at a specific index.


var subOptionModel = {
        text: "test",
        price: 0,
    };
    var optionModel = {
        optionSetId: 0,
        optionName: "",
        optionPrice: 0,
        editOptionName: false,
        subOptions: [subOptionModel],
    };
    const [options, setOptions] = useState([optionModel]);

I have multiple options in options state, how can I update the state like the option at index 2 and suboption at 1 here is what I tried so for.


setOptions(
                options.map((x, index) => {
                    if (index !== optionIndex) return x;
                    x.subOptions.map((subItem, subIndex) => {
                        console.log(subItem);
                        if (subIndex !== subOptionIndex) return subItem;
                        return {
                            ...subItem,
                            text: text
                        };
                    });
                }),
            );

Hakan Bilgin · Accepted Answer · 2020-08-11 12:45:11Z

1

I would rather use, useReducer hook for this kind of data model. Personally, I find it more clean.

But your problem is that, you are not mutating and returning your subOptions back.

setOptions(
  options.map((x, index) => {
      if (index !== optionIndex) return x;
      x.subOptions = x.subOptions.map((subItem, subIndex) => {
          console.log(subItem);
          if (subIndex !== subOptionIndex) return subItem;
          return {
              ...subItem,
              text: text
          };
      });

      return x;
  }),
);

answered Aug 11, 2020 at 12:45

Hakan Bilgin

513 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Atiq Ur Rehman Over a year ago

thanks, it works, can you please explain it a bit more maybe it will help someone else :)

Pierre Olivier Tran · Accepted Answer · 2020-08-11 12:38:34Z

1

I'd suggest you use an immutability library, such as immer.js. This will allow you to select precisely what you want to update within your state.

This will allow you to modify your options like this:

import produce from "immer"

const newOptions = produce(options, draftOptions => {
    draftOptions[2].subOption[1] = [whatever you want]
})

setOptions(newOptions)

answered Aug 11, 2020 at 12:38

Pierre Olivier Tran

1,8894 gold badges28 silver badges46 bronze badges

Comments

TheWuif · Accepted Answer · 2020-08-11 12:40:29Z

0

following your solution you missed to return in the first map if index === optionIndex.

setOptions((options) => {
  return options.map((x, index) => {
    if (index !== optionIndex) return x;
    return {
      ...x,
      subOptions: x.subOptions.map((subItem, subIndex) => {
        if (subIndex !== subOptionIndex) return subItem;
        return {
          ...subItem,
          text: text
        };
      })
    }
  })
})

Otherwise you can use something like immer.js

answered Aug 11, 2020 at 12:40

TheWuif

1,0469 silver badges11 bronze badges

Collectives™ on Stack Overflow

React Hooks Update Nested Array

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related