Trying to solve a React practise question

Sonal Khare — Sat, 15 Mar 2025 00:22:36 +0000

Description--- On Add button click, a ProgressBar component is added

https://www.greatfrontend.com/questions/user-interface/progress-bars/react?framework=react&tab=coding

App.jsx

`import { useState } from 'react';
import './App.css';
import ProgressBar from './components/ProgressBar';

const App = () => {
const [progressBarCount, setProgressBarCount] = useState(0);
let arr = [];

const handleButtonClick = () => {
setProgressBarCount((prevValue) => prevValue + 1);
// console.log('on click', progressBarCount);
};

for (let i = 0; i < progressBarCount; i++) {
arr.push();
}
// console.log(arr);

return (
<>
Add
{arr}
</>
);
};

export default App;
`

ProgressBar.jsx
`import { useState } from 'react';

const ProgressBar = () => {
const [width, setWidth] = useState(0);

const timeoutId = setTimeout(() => {
setWidth((prevValue) => {
// console.log('prev value', prevValue);
prevValue = prevValue + 1;
console.log('prevValue ', prevValue);
return prevValue;
});
}, 50);

if (width > 99) {
clearTimeout(timeoutId);
}
return (

className="w3-red"
style={{ height: '24px', width: `${width}%` }}
>

);
};

export default ProgressBar;
`

DEV Community: Sonal Khare

Trying to solve a React practise question