how to push multiple arrays to another array and update the value using useEffect properly in React JS?

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) finally I try something someone suggested me setAllItems([LibrosID1, LibrosID2, LibrosID3]) but it ended up looping and bringing an error:

My "closest" attempt so far has being this one :

useEffect(() => {
        let x = 0;
        
        LibrosID1.map((i) => {
          x += i.precio
        })
    
        LibrosID2.map((i) => {
          x += i.precio
        })
    
        LibrosID3.map((i) => {
          x += i.precio * i.necesita
        })
    
        setSubTotal(parseFloat(x).toFixed(2))
        setAllItems([LibrosID1, LibrosID2, LibrosID3])
    
        console.log(allItems)
      }, [LibrosID1, LibrosID2, LibrosID3]);

What I do not understand is that I'm doing exactly the same with setSubTotal but that doesn't give me any kind of issue and it doesn't make sense that setAllItems give me an error and loop otherwise setSubTotal would loop and error as well right? so what am I doing wrong?

Any tips, documentation and help is welcome.

If you require the whole code let me know but I doubt is required.

Update - Edit: So I fixed the loop bit and separated the code so people don't get confuse, but now I'm having a delay when I try to get data

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

When I click the checkbox I get to see how the data is getting parse on LibrosID1 but it says 0 on allItems:

When I click the checkbox again it says 12, even though I just "uncheck" them.

I don't get it! very frustrated atm

It seems like it's stuck in an infinite loop based on your effect dependencies. stackoverflow.com/a/59468261/9430279 This thread might be something you need. — Shawn Yap
– Shawn Yap, Commented Sep 27, 2021 at 22:03
Also, don't use map() unless you need the returned array, use forEach or a for loop. see: JavaScript: Difference between .forEach() and .map() — pilchard
– pilchard, Commented Sep 27, 2021 at 22:07
@pilchard the map is needed there because is grabbing an specific value from the array in this case the price for setSubTotal and that bit is working perfectly fine. All I'm having issues is with sending the data from the arrays LibrosID1 , LibrosID2 , LibrosID3 — React Enjoyer
– React Enjoyer, Commented Sep 27, 2021 at 22:13
After you solve useEffect loop problem, you can combine arrays with es6 spread operator : [...arr1,...arr2,...arr3] — cansu
– cansu, Commented Sep 27, 2021 at 22:14
@cansu I'm doing that setAllItems([LibrosID1, LibrosID2, LibrosID3]) — React Enjoyer
– React Enjoyer, Commented Sep 27, 2021 at 22:30

Shamar Yarde · Accepted Answer · 2021-09-28 15:30:46Z

1

You can try the following:

let librosID1 = ["a"];
let librosID2 = ["b"];
let librosID3 = ["c"];

const [allItems, setAllItems] = useState(null);
const [subTotal, setSubTotal] = useState();

useEffect(() => {

  setAllItems([...librosID1, ...librosID2, ...librosID3]);
}, []);

console.log(allItems)

The spread operator is used to display or combine all elements from objects or arrays.

References:

Spread syntax (...). https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax. (Accessed 28 September, 2021).

edited Sep 28, 2021 at 15:30

answered Sep 28, 2021 at 0:38

Shamar Yarde

7601 gold badge8 silver badges21 bronze badges

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

2 Comments

React Enjoyer Over a year ago

whats the difference between setAllItems([LibrosID1, LibrosID2, LibrosID3]) vs setAllItems([...librosID1, ...librosID2, ...librosID3]); ?

Shamar Yarde Over a year ago

@ReactPotato I added an explanation to my answer. The link in the references has more details.

Collectives™ on Stack Overflow

how to push multiple arrays to another array and update the value using useEffect properly in React JS?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related