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 });
}}
/>)
Source: stackoverflow.com
Related Query
- Create an array of different objects dynamicly
- Create nested JSX list items from multi-level nested array of objects reactjs
- JSX add attribute to array of different objects
- Create a single object from an array of objects - JS/ES6
- Using a value to compare against an array of objects to return a different value within that object?
- Create nested JSX elements from multi-level nested array of objects reactjs
- Map array of objects to create nested ul depending on property
- Create a unique key when mapping over array of objects
- How to compare array objects present in two different React states
- How to loop through an array an put create an array of objects using react and javascript?
- A lookup function to match the same IDs in two different arrays of objects and inserting key/value pairs into one of the array of objects
- How to create reusable method to handle API returning single object getByID and array of objects by getAll in React.js
- React yup validation with and react-hook-form, array of different type of objects depends from one of object attribute
- How to create a new array of objects for each String Javascript/React?
- Create nested array form an array of objects
- Merge two arrays of different objects into one array of objects combined from the first two
- how make a new array of objects with different key names from another array of objects in JavaScript?
- Is there any way I can apply different inline style when I mapping through array of objects inside jsx?
- Merge objects from the same array by two with different keys
- How can i create an array of objects with the object entries?
- How to map an array of objects to different components props in React?
- how to sort an array of objects with different keys
- Consolidate array of objects with similar key values and create new array with less objects
- React – Create array from arrays in Objects
- loop throught array of objects then filter and also create new object within
- how to mapping on two different array of objects in react
- Compare Two different arrays and update array of objects with useState in React
- Create different objects inside map with ternary
- How to compare the values of different objects of an array
- React pass array of objects to component which are using different keys
More Query from same tag
- Material-ui Tabs - how can I put scroll of them
- onBlur function on a textbox that rerenders the whole playlist is preventing the ability to tab over to the next textbox
- ESLint with React gives `no-unused-vars` errors
- React functional component setState not updating the state
- Testing a Material ui Select component without using testid
- Storing Data In variable using Reactjs and Nodejs
- Node/Express Cannot POST error (React frontend)
- Express + React | Googleapis - download a file
- Typescript why can't return header in function?
- Handling input change for API call in React.JS
- straight out of react.js.org and it crashes
- How to handle Mobile screens
- REACT JS FIREBASE FIRESTORE- how can i update my field in a document?
- Testing reach router with react-testing library
- React how to render only parts of an array?
- react redux way of printing props
- Async actions in Redux
- React Dynamic CSS
- Replacing Redux with Apollo for local state management
- Show custom dialog setRouteLeaveHook or history.listenBefore react-router/redux?
- How to loop single const for multiple time in NextJs
- Running React in Docker using Docker Compose does not work
- Axios only fetches Azure API response ONCE
- useRef - use ref to handler function inside functional component?
- React, state, Why the `count` is not defined?
- React - send function to child via stateless component
- ReactJS: Toggle class for css transition
- How to turn off input autocomplete?
- HTTPS redirect with Express and React
- Websocket post request to NODE server and not get response