Push into array of objects with nested level using spread operator

Question

I am having an object containing array of objects with following format which is stored in a state

const [value, setVal] = useState({ available : [], done: [] })

done is an array of objects with following structure

[{col: "test", val: ["abc","xyz"]}]

I am writing a function that takes field and value as input parameters. If the field is present in done array, then I need to push it inside its corresponding val array. Else I need to create a new object and then push it inside. How can I achieve this?

How can I set the state in both the cases?Code that I tried is below

function update(field, value){
    const filterIndex = value.done.findIndex((obj) => field === obj.col);
    if (filterIndex > -1) {
      value.done[filterIndex].val.push(value);
    } else {
      setVal({
        ...value,
        done: [
          ...value.done,
          {
            col: field,
            val: [value],
          }
        ]
      });
    }
}

I would suggest you split the val into multiple states. It's too "nested" for a single useState imo — Tasos
– Tasos, Commented Feb 16, 2022 at 12:36

Amila Senadheera · Accepted Answer · 2022-02-16 13:08:09Z

You should use a separate variable name for the state instead of value since the function has a local variable also called value.

Try like below.

const [values, setVals] = useState({ available: [], done: [] })

function update(field, value) {
  const filterIndex = values.done.findIndex((obj) => field === obj.col);
  if (filterIndex > -1) {
    // get a copy of the previous state done values
    const updatedDone = [...values.done];
    // update the new value in the copy of the array
    updatedDone[filterIndex].val.push(value);
    // update the state
    setVals((prevValue) => ({ ...prevValue, done: updatedDone }));
  } else {
    // add the new entry for the new filed with the value
    setVals((prevValue) => ({
      ...prevValue,
      done: [
        ...prevValue.done,
        {
          col: field,
          val: [value],
        },
      ],
    }));
  }
}

jsN00b · Accepted Answer · 2022-02-16 13:11:59Z

This may be one possible solution:

Code Snippet

const stateVal = { available : [], done: [{col: "test", val: ["abc","xyz"]}] };

const updateStateVal = (sv, field, value) => ({
  ...sv,
  done: (
    sv.done.map(ob => ob.col).includes(field)
    ? sv.done.map(ob => (
      ob.col === field
      ? {...ob, val: ob.val.concat([value])}
      : {...ob}
    ))
    : sv.done.concat([{ col: field, val: [value] }])
  )
});

console.log('existing col test: ', updateStateVal(stateVal, 'test', 'def'));
console.log('non-exist col test2: ', updateStateVal(stateVal, 'test2', 'def'));

How to use

setVal(prev => ({...updateStateVal(prev, field, value)}));

Explanation

The objective is to insert value based on presence/absence of field in done.
The method updateStateVal takes 3 params, the prev-state sv, the field & the value
Use ... spread operator to list down all props of prev (ie, sv) as-is
Now, override the done prop
First check if the prev-state's done already has field by matching with the cols from each array-element.
This is done using .map() in conjunction with .includes()
If found, iterate through the done array.

For the array element where col matches field, .concat the existing val array with value. All other elements go as-is.
If not found, simply .concat a single-element array ([{ col: field, val: [value]}]) to existing done array.

Collectives™ on Stack Overflow

Push into array of objects with nested level using spread operator

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related