Editing multiple object value in an object array with useState

Question

I have an object array similar to below

[array1, setArray1] = useState(
        [
        {
          name: "somename",
          count: 0,
          division: "somedivision",
          cost: 1000,
        },
        {
          name: "secondname",
          count: 0,
          division: "somedivision",
          cost: 2000,
        },
      ]
)

How can i individually update the cost value of each object in my list?

I was thinking of something like setArray1((previous) => ({...previous, cost: newcost}))

But how can i do this for multiple objects in an object array?

1. create a copy of sufficiently deep level 2. update it 3. call setArray1 — user5734311
– user5734311, Commented Jul 25, 2022 at 10:13
Does this answer your question? Updating multiple array object values with useState in React — user5734311
– user5734311, Commented Jul 25, 2022 at 10:13
@ChrisG The example link you provided shows a situation where they want to update the entire list value by 10 and i can understand the logic there. In my case, i need to update the data individually with different values based on values i get from another api call response. — CodingRockz
– CodingRockz, Commented Jul 25, 2022 at 10:19
@CodinRockz Then update the data individually in the callback. — xehpuk
– xehpuk, Commented Jul 25, 2022 at 10:21

JeanJacquesGourdin · Accepted Answer · 2022-07-25 10:41:28Z

0

const App = () =>{
  const [array, setArray] = React.useState([
        {
          name: "somename",
          count: 0,
          division: "somedivision",
          cost: 1000,
        },
        {
          name: "secondname",
          count: 0,
          division: "somedivision",
          cost: 2000,
        },
  ])
  const updateCosts = () => {
    let newCosts = [1002, 2006]
    setArray(previous => 
      previous.map((elem, index)=> {
        return({...elem, cost: newCosts[index]})
      })
     )
  }

  return(
    <div>
    <button onClick={()=>updateCosts()}>Update costs</button>
    { array.map(elem => <p key={elem.name}>{`Product ${elem.name} Cost ${elem.cost}`}</p>) }
    </div>
  )
}

ReactDOM.render(
    <App/>,
    document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>

edited Jul 25, 2022 at 10:41

answered Jul 25, 2022 at 10:26

JeanJacquesGourdin

1,87112 silver badges30 bronze badges

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

8 Comments

CodingRockz Over a year ago

can i use this without useEffects ?

xehpuk Over a year ago

@CodinRockz Why?

JeanJacquesGourdin Over a year ago

Why not ? @CodinRockz answer edited

CodingRockz Over a year ago

cheers mate, can you also please add the previous code with useEffects, so i could compare. I will check and provide update soon. @JeanJacquesGourdin

JeanJacquesGourdin Over a year ago

The code is exactly the same, I mean just the display changed, the important part is in updateCost function .useEffect were used to apply a modification on render to avoid user interaction, I just put sequins on the code by asking user when to update. You can still have the previous version by checking the edits on the post

|

Collectives™ on Stack Overflow

Editing multiple object value in an object array with useState

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related