Reactjs creating a array containing a bunch of objects using hooks

Question

I'm trying to create a array which contains a bunch of objects like this and insert them upon different actions:

[
{price: 'price_1M73OzIRkO5W1JretwretkAHa', quantity: 1},
{price: 'price_1M73OzI4545W1JretwretkAHa', quantity: 3},
{price: 'price_1M73OzIRkO4545twr45kAHa', quantity:2}
]

However I cant seem to add in a third object it just overwrittes the second one.

const [allPlans, setAllPlans] = useState([]);

setAllPlans([{...allPlans, price:'price_1M73OzIRkO5W1JretwretkAHa', quantity: 1}]);

Thank you for the help!

update: Early in the code I do do this to update the quanity on the orginal entry. Could this be creating the issue?

setAllPlans({...allPlans,"quantity": userAmount});

Update: Here is a link to a working example of the problem corrected: https://codesandbox.io/s/priceless-ully-594ihs?file=/src/App.js:280-287

You want to spread out the array of existing objects, and add a new object to that array: setAllPlans([ ...allPlans, newObj ]); — Andy
– Andy, Commented Nov 23, 2022 at 19:34

Sean · Accepted Answer · 2022-11-23 19:52:23Z

2

Try this method:

setAllPlans(allplans => [...allplans, {price:'price_1M73OzIRkO5W1JretwretkAHa', quantity: 1}]);

Here's an additional link demonstrating how this works: https://codesandbox.io/s/react-hooks-playground-forked-ooi7og?file=/src/index.tsx

edited Nov 23, 2022 at 19:52

answered Nov 23, 2022 at 19:31

Sean

1,4763 gold badges13 silver badges33 bronze badges

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

14 Comments

Andy Over a year ago

You really need to test the code before you post it. This won't work.

Sean Over a year ago

edited, why wont it work?

Andy Over a year ago

Well, it will work now. But your previous edit would not work.

Jared Smith Over a year ago

Please add an explanation of why this works but the OPs code doesn't. Teach a man to fish and whatnot.

Robert Over a year ago

That actually gives me this error: allplans is not iterable

|

mrconcerned · Accepted Answer · 2022-11-23 20:32:48Z

Maybe there is a cleaner way to do it, but you can try to do it with push method where prevPlans is going to be your initial array and you can add specific objects into that array.

setAllPlans((prevPlans) => [
      prevPlans.push({
        price: "i'm new here",
        quantity: 1
      })
    ]);

const {
  useState
} = React;

const App = () => {
  const [allPlans, setAllPlans] = useState([{
      price: "price_1M73OzIRkO5W1JretwretkAHa",
      quantity: 1
    },
    {
      price: "price_1M73OzI4545W1JretwretkAHa",
      quantity: 3
    },
    {
      price: "price_1M73OzIRkO4545twr45kAHa",
      quantity: 2
    }
  ]);

  const addtoArray = () => {
    //prevPlans is your actual array and you push new object inside it and set your state
    setAllPlans((prevPlans) => [
      prevPlans.push({
        price: "i'm new here",
        quantity: 1
      })
    ]);
    console.log(allPlans);
  };

  return ( <
    div >
    <
    button onClick = {
      () => addtoArray()
    } > Click me < /button> <
    /div>
  );

}


// Render it
ReactDOM.createRoot(
  document.getElementById("root")
).render( <
  App / >
);

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

Collectives™ on Stack Overflow

Reactjs creating a array containing a bunch of objects using hooks

2 Answers 2

14 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

14 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related