score:0

to override the old state you can't use spread with an array => that will just combine the two arrays into one.

you either need to implement a search that will loop over all of the objects that you have inside the array and find the one that you need to update :

// loop over all entries
for(const i = 0; i < array.length; i++){
  // is not the correct id, so not the correct obejct 
  if(array[i].id !== id) continue;

  // found the correct object
  array[i] = {id: i, ...};
}
// update state
setstate(array);

but that would make js search every element once someone clicks the up / down arrows, so i would recommend that you put the state of the inputs into the array by their indexies:

// we already know the location of the state for the input because we put it into the same index as the key of the input!
array[i] = {id: i, ...}
setstate(array)

expample codesandbox


const reducer = (state, { type, i, checked, number }) => {
    switch (type) {
      case "setvalues":
        // reducer needs a new copy of the state
        const newstate = [...state];
        newstate[i] = {
          id: i,
          checked: checked ? checked : state[i]?.checked,
          number: number ? number : state[i]?.number
        };
        console.log(newstate);
        return newstate;

      default:
        break;
    }
  };

const [state, dispatch] = usereducer(reducer, initstate);

return(
  <inputnumber
     min={1}
     max={10}
     onchange={(number) => {
                  dispatch({ type: "setvalues", i, number });
              }}
  />)

Related Query

More Query from same tag