Catch randomly generated numbers and store them into array in React

Question

I'm learning React and doing a practice task. I need to generate numbers every (time interval), which I did like this.

 import React, { useEffect, useState } from "react";

const SalesGenerator = () => {
  const [number, setNumber] = useState(0);
  //   let salesArr = [];
  useEffect(() => {
   
    const interval = setInterval(
      () => setNumber(Math.floor(Math.random() * 50 + 1)),
      1000,
    );

    // clean up interval on unmount
    return () => {
      clearInterval(interval);
    };
  }, []);

  return (
    <div>
      <p>{number}</p>
    </div>
  );
};

export default SalesGenerator;

How do I grab every generated number and push it into an array. I understand this is the step I need to get to in order to use the array/object to generate a chart to visualise that data.

Yi Zhou · Accepted Answer · 2021-01-26 19:11:20Z

1

Something like this

const [number, setNumber] = useState(0);

  const [list, setList] = useState([]);
  useEffect(() => {
    const interval = setInterval(
      () => setNumber(Math.floor(Math.random() * 50 + 1)),
      1000,
    );
    // clean up interval on unmount
    return () => {
      clearInterval(interval);
    };
  }, []);

  useEffect(() => {
    setList([...list, number])
  }, [number])
  return (
    <div>
      <p>{list}</p>
    </div>
  );

edited Jan 26, 2021 at 19:11

answered Jan 25, 2021 at 1:16

Yi Zhou

8231 gold badge8 silver badges24 bronze badges

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

4 Comments

Olesja Petrova Over a year ago

Thanks, Yi Zhou. It makes a lot of sense, but somehow doesn't work. :(

Yi Zhou Over a year ago

My bad, you will need two useEffect in order to get working, one to track random number and one to push to list

Olesja Petrova Over a year ago

So cool, Yi Zhou! It did not occur to me to use two useEffects and two state hooks for each element. I tried to shove it all into one useEffect. Great answer! Makes perfect sense.

adir abargil Over a year ago

seems to me like bad practice...

Collectives™ on Stack Overflow

Catch randomly generated numbers and store them into array in React

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related