How do i setState in multidimensional array of objects via functional component

Question

How do I change the value of inCart to true based on id, like i have a function that will provide a id , and base that id i want to change the first objects inCart value to true or the 2nd object inCart value

I tried like this:

setInfo({ info[id].inCart: true })
/*Note: id is a parameter that hold the number like 1 or 2 etc*/

const [info, setInfo] = useState([
        {
            id: 1,
            title: "Google Pixel - Black",
            inCart: false
        },
        {
            id: 2,
            title: "Samsung S7",
            inCart: false,
        }  
])

What is the id in info[id] refer to??Index or the id of Object — Sumanth Madishetty
– Sumanth Madishetty, Commented Sep 24, 2019 at 11:54

Dennis Vash · Accepted Answer · 2019-09-24 11:59:42Z

3

Try Array#find to find the reference, mutate it and return a shallow copy of your state.

const [info, setInfo] = useState([
  {
    id: 1,
    title: 'Google Pixel - Black',
    inCart: false
  },
  {
    id: 2,
    title: 'Samsung S7',
    inCart: false
  }
]);

const idToChange = getId();

setInfo(info => {
  const matchingCart = info.find(cart => card.id === idToChange);
  matchingCart.inCart = !matchingCart.inCart;
  return [...info];
});

answered Sep 24, 2019 at 11:59

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

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

1 Comment

devserkan Over a year ago

Generally, I use map and return a new array but I also like this logic if you need to mutate your state in your control. Maybe there could be an explanation of why we return a shallow copy of our state since if we don't do that react don't rerender the component.

Collectives™ on Stack Overflow

How do i setState in multidimensional array of objects via functional component

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