![iFixit Tears Down New M4 MacBook Air [Video]](https://www.iclarified.com/images/news/96717/96717/96717-640.jpg)
![Apple Officially Announces Return of 'Ted Lasso' for Fourth Season [Video]](https://www.iclarified.com/images/news/96710/96710/96710-640.jpg)
![9to5Rewards: Last chance to win a MacBook Pro from Chargeasap [Giveaway]](https://i0.wp.com/9to5mac.com/wp-content/uploads/sites/6/2024/10/M4-MacBook-Pro-doesnt-tempt-me-because-Apple-Silicon-Macs-are-almost-too-good.jpg?resize=1200%2C628&quality=82&strip=all&ssl=1)
![[The AI Show Episode 139]: The Government Knows AGI Is Coming, Superintelligence Strategy, OpenAI’s $20,000 Per Month Agents & Top 100 Gen AI Apps](https://www.marketingaiinstitute.com/hubfs/ep%20139%20cover-2.png)
![[The AI Show Episode 138]: Introducing GPT-4.5, Claude 3.7 Sonnet, Alexa+, Deep Research Now in ChatGPT Plus & How AI Is Disrupting Writing](https://www.marketingaiinstitute.com/hubfs/ep%20138%20cover.png)
![If I use an API licensed with apache 2.0 in my project, what license do I use and what should I be aware of? [closed]](https://cdn.sstatic.net/Sites/softwareengineering/Img/apple-touch-icon@2.png?v=1ef7363febba)
.jpg?#)
.jpg?#)
Trying to solve a React practise question
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; `
Description--- On Add button click, a ProgressBar component is added
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;
`
