reactjs-interview-coding/progressBar.js at master · enterthevoid8/reactjs-interview-coding · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
import { useEffect, useState } from "react";

export default function ProgressBar() {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setProgress((prev) => {
        if (prev >= 100) {
          clearInterval(interval);
          return 100;
        }

        return prev + 10;
      });
    }, 500);

    return () => clearInterval(interval);
  }, []);

  return (
    <div>
      <div
        style={{
          width: "300px",
          border: "1px solid black",
        }}
      >
        <div
          style={{
            width: `${progress}%`,
            height: "20px",
            background: "green",
          }}
        />
      </div>

      <p>{progress}%</p>
    </div>
  );
}