how to push multiple objects in react js to array?

Question

Hello I was trying to store some data in my array and I did try allData.push(Data1, Data2, Data3) but it said .push was not a function and it also didn't let me just allData(Data1, Data2, Data3), w/e data I get it overrides the previous one. I also tried allData(Data1+Data2+Data3)

This is my code:

useEffect(() => {
    let x = 0;
    
    LibrosID1.map((i) => {
      x += i.precio
    })

    LibrosID2.map((i) => {
      x += i.precio
    })

    LibrosID3.map((i) => {
      x += i.precio
    })

    setAllItems(LibrosID1, LibrosID2, LibrosID3)
    setSubTotal(parseFloat(x).toFixed(2))

  });

// I have 3 like this the only thing that changes is variable # from 1 to 3

const [LibrosID1, setLibrosID1] = useState([]);
    const handleChange1 = (e, data) => {
    const { name, checked } = e.target;
    if (checked) {
      // if cheked and selectall checkbox add all fileds to selectedList
      if (name === "allSelectNuevos") {
        setLibrosID1(librosNuevos);

        let x = 0
        librosNuevos.map((i) => {
          x += i.precio
          setTPLibrosNuevos(parseFloat(x).toFixed(2))
        })

      } else {
        // if cheked and specific checkbox add specific field to selectedList
        setLibrosID1([...LibrosID1, data]);

        let x = 0
        LibrosID1.map((i) => {
          x += i.precio
          setTPLibrosNuevos(parseFloat(x).toFixed(2))
        })
      }
    } else {
      // if uncheked and selectall checkbox add remove all fileds from selectedList
      if (name === "allSelectNuevos") {
        setLibrosID1([]);

        let x = 0
        librosNuevos.map((i) => {
          x = 0
          setTPLibrosNuevos(parseFloat(x).toFixed(2))
        })

      } else {
        // if uncheked and specific checkbox remove specific field from selectedList
        let tempuser = LibrosID1.filter((item) => item.id !== data.id);
        setLibrosID1(tempuser);

        let x = 0
        tempuser.map((i) => {
          x += i.precio
          setTPLibrosNuevos(parseFloat(x).toFixed(2))
        })
      }
    }
  };

  useEffect(() => {
    console.log(LibrosID3, tpPaqueteCuadernos, allItems);
 }, [LibrosID1, tpLibrosNuevos])

In short I'm calculating my subtotal and that bit is working and now I want to store all the items I'm "buying" in allItems

This is what it prints when I click on the LibrosID1 all checkbox:

This is what it prints when I click on the LibrosID2 all checkbox:

And finally this is when I click on the last one LibrosID3 all checkbox:

As you can see it only adds the value from LibrosID1 even though I have it as setAllItems(LibrosID1, LibrosID2, LibrosID3)

Any tips, documentation and help is welcome.

vishwas meshram · Accepted Answer · 2021-09-27 17:50:12Z

1

By looking at your code, I assume setAllItems should be storing the array. To do that you need to pass an array to setAllItems like setAllItems([LibrosID1, LibrosID2, LibrosID3])

answered Sep 27, 2021 at 17:50

vishwas meshram

3561 silver badge6 bronze badges

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

7 Comments

React Enjoyer Over a year ago

Yeah that seems to work but now I'm getting an infinite loop cause is inside an useEffect

React Enjoyer Over a year ago

Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.

vishwas meshram Over a year ago

that's correct, as you are updating allItems inside useEffecect without any dependency which means it will run each time there is any change in state. You can check these links. stackoverflow and reactjs.org

React Enjoyer Over a year ago

But I'm doing exactly the same for my subTotal and that doesn't happen to my subTotal only to my allItems ... now I'm confuse.

React Enjoyer Over a year ago

and is not really saving data because I just double checked sending it to somewhere else any ideas ?

|

Collectives™ on Stack Overflow

how to push multiple objects in react js to array?

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related