Modify an array of objects using useState()

Question

I have an array of objects and when my component mounts I want to modify a property on the objects in the array.

For context: I am loading a component, waiting for the images to load, then i get the image dimensions and then i figure out the aspect ratio and change that value in the array.

Here is some reduced code for readability:

let itemsOriginal = [
  {
    id: 1, 
    src: "<img-src>",
    aspectRatio: null
  },
  {
    id: 2, 
    src: "<img-src>",
    aspectRatio: null
  },
  {
    id: 3, 
    src: "<img-src>",
    aspectRatio: null
  }
];

const [items, setArr] = useState(itemsOriginal);

useEffect(() => {
  
  // figure out aspect ratio
  // then try and set that value to obj property in array

  setArr(
    items.map((item, index) => {
      item.aspectRatio === null 
        ? {...item, aspectRatio: "changed"} // <<< how do i get item.aspectRatio to update ???
      : '' 
    }
  ))
})

Anoop Joshi P · Accepted Answer · 2021-05-04 14:00:27Z

2

You can do,

  const update = () => {
    const itemsClone = [...items];
    itemsClone.forEach((p) => {
      p.aspectRatio = 'new value';
    });
    setArr(itemsClone);
  };

answered May 4, 2021 at 14:00

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

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

1 Comment

Jonny Over a year ago

Thanks Anoop, I ended up using a map as I wanted to filter which item properties get changed, but this syntax is exactly what I was looking for, thanks again :)

Collectives™ on Stack Overflow

Modify an array of objects using useState()

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related