Adding object in Array in nested object with setState

Question

I'd like to know how to add an object in datasets, I'm trying to add an object in array with using setState, but It doesn't work at all .

my code is like this :

 const [DataContext, setDataContext] = useState([
    {
      labels: defaultLabels,
      datasets: [
        {
          label: "dataSetting",
          data: defaultDatas,
          backgroundColor: defaultBackgroundColor,
        },
      ],
    },
    {
      labels: defaultLabels,
      datasets: [
        {
          label: "dataSetting",
          data: defaultDatas,
          backgroundColor: defaultBackgroundColor,
        },
      ],
    }, 
    {
      labels: defaultLabels,
      datasets: [
        {
          label: "dataSetting",
          data: defaultDatas,
          backgroundColor: defaultBackgroundColor,
        },
      ],
    },

  const addAxis = index =>  {
    let addAxis = [...DataContext];
    addAxis[index].datasets.push({ label: "", data: "", background: "" });

    setDataContext(addAxis);
  };

that's because spread operator creates a shallow copy. you need to create a deep copy and then update the state — boxdox
– boxdox, Commented Aug 11, 2021 at 7:00

Wai Ha Lee · Accepted Answer · 2021-08-11 14:59:53Z

1

You need a deep copy to update the state:

const addAxis = index =>  {
  setDataContext(dataContext => dataContext.map((data, idx) => {
     return idx === index ? {
        ...data,
        datasets: [...data.datasets, { label: "", data: "", background: "" }]
     } : data
  })
};

edited Aug 11, 2021 at 14:59

Wai Ha Lee

8,856102 gold badges61 silver badges100 bronze badges

answered Aug 11, 2021 at 7:03

Sinan Yaman

5,9562 gold badges21 silver badges40 bronze badges

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

1 Comment

Sinan Yaman Over a year ago

This is the most efficient way to do this, props to @DrewReese. You can use a library like lodash to clone deep.

F.E · Accepted Answer · 2021-08-11 07:06:06Z

You need to deep copy DataContext.

const _copy = (value) => {
    let object;
    if (Array.isArray(value)) {
        object = [];
        value.forEach((item, index) => {
            if (typeof value[index] === 'object') {
                object[index] = _copy(value[index]);
            } else {
                object[index] = value[index];
            }
        });
    } else {
        object = {};
        for (let key in value) {
            if (typeof value[key] === 'object') {
                object[key] = _copy(value[key]);
            } else {
                object[key] = value[key];
            }
        }
    }
    return object;
};

const addAxis = index =>  {
    let addAxis = _copy(DataContext);
    addAxis[index].datasets.push({ label: "", data: "", background: "" });

    setDataContext(addAxis);
 };

Collectives™ on Stack Overflow

Adding object in Array in nested object with setState

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related