Scribd
Upload
11 views12 pages

React Countdown Timer with Fetching Data

Uploaded by

younesselouazzani02
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
11 views12 pages

React Countdown Timer with Fetching Data

Uploaded by

younesselouazzani02
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

======================Task 14: Fetching Data and Displaying a Countdown

Timer==============================
import React, { useState, useEffect } from 'react';

export const CountDownTimer = () => {


const [error, setError] = useState(null);
const [loading, setLoading] = useState(true);
const [count, setCount] = useState(0);
const [isPaused, setIsPaused] = useState(true);

useEffect(() => {
const TimerFetcher = async () => {
try {
const response = await fetch('[Link]
if (![Link]) {
throw new Error('Network response was not ok');
}
const jsonTimer = await [Link]();
// Assuming we want to set count based on the number of posts
setCount([Link]); // or use a specific value from jsonTimer
} catch (error) {
setError([Link]);
} finally {
setLoading(false);
}
};

TimerFetcher(); // Call the fetch function here


}, []); // Run only once on mount

useEffect(() => {
let interval;
if (!isPaused && count > 0) {
interval = setInterval(() => {
setCount(prevCount => prevCount - 1);
}, 1000);
}

// Cleanup function to clear the interval


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

const handleStartClick = () => {


setIsPaused(false);
};

const handlePauseClick = () => {


setIsPaused(true);
};

const handleResetClick = () => {


setCount(0); // Resetting count to 0. Change if needed.
setIsPaused(true);
};
return (
<div>
{loading ? (
<p>Loading...</p>
) : error ? (
<p>Error: {error}</p>
) : (
<>
<h1>{count}</h1>
<button onClick={handleStartClick}>Start</button>
<button onClick={handlePauseClick}>Pause</button>
<button onClick={handleResetClick}>Reset</button>
</>
)}
</div>
);
};

====================== Task 13: Implementing a Timer Using useState and


useEffect==============================
import React, {useState, useEffect} from 'react';

export const CountDownTimer = ({timer}) => {


const[count, setCount] = useState(timer);
const[isPaused, setIsPaused] = useState(true);

useEffect (() => {


let interval;
if (!isPaused)
{
if (count >= 0)
{
interval = setInterval(() => {
setCount(prevCount => prevCount - 1);
}, 1000);
}
}
}, [isPaused]);

const handleStartClick = () => {


setIsPaused(false);
};

const handlePauseClick = () => {


setIsPaused(true);
};

const handleResetClick = () => {


setCount(0);
setIsPaused(true); // Optionally pause the timer when reset
};

return (
<div>
<h1>{count}</h1>
<button onClick={handleStartClick}>Start</button>
<button onClick={handlePauseClick}>Pause</button>
<button onClick={handleResetClick}>Reset</button>
</div>
);

};

====================== Task 13: Implementing a Timer Using useState and


useEffect==============================
import React, { useState, useEffect } from 'react';

export const Timer = () => {


const [count, setCount] = useState(0);
const [isPaused, setIsPaused] = useState(true);

useEffect(() => {
let interval;

if (!isPaused) {
interval = setInterval(() => {
setCount(prevCount => prevCount + 1);
}, 1000);
}

// Cleanup function to clear the interval


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

const handleStartClick = () => {


setIsPaused(false);
};

const handlePauseClick = () => {


setIsPaused(true);
};

const handleResetClick = () => {


setCount(0);
setIsPaused(true); // Optionally pause the timer when reset
};

return (
<div>
<h1>{count}</h1>
<button onClick={handleStartClick}>Start</button>
<button onClick={handlePauseClick}>Pause</button>
<button onClick={handleResetClick}>Reset</button>
</div>
);
};

====================== Task 12: Updating Fetched Data==============================


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

export const DataFetcher = () => {


const[data, setData] = useState([]);
const[loading, setLoading] = useState(true);
const[error, setError] = useState(null);
const[isClicked, setIsClicked] = useState(false);
useEffect(() => {
const fetchData = async () => {
try{
const response = await
fetch('[Link]
if (![Link]){
throw new Error ('Network response was not ok');
}
const jsonData = await [Link]();
setData(jsonData);
}catch (error) {
setError([Link]);
}finally{
setLoading(false);
}
};
fetchData();
if (isClicked){
fetchData();
setIsClicked(false);
}
}, [isClicked]);

function handleClick(){
setIsClicked(true);
}

return(
<>
<div>
{loading ? <p> Loading ... </p> : error ? <p>Error: {error}</p> : (
<ul>
{[Link](item => (
<li key={[Link]}>{[Link]}</li>
))}
</ul>
)}
</div>
<button onClick={handleClick}> Refresh </button>
</>
);
};

====================== Task 11: Implementing a Basic Fetch


Request==============================
import React, {useState, useEffect} from 'react';

export const DataFetcher = () => {


const[data, setData] = useState([]);
const[loading, setLoading] = useState(true);
const[error, setError] = useState(null);

useEffect(() => {
const fetchData = async () => {
try{
const response = await fetch( JSONPlaceholder Posts);
if (![Link]){
throw new Error ('Network response was not ok');
}
const jsonData = await [Link]();
setData(jsonData);
}catch (error) {
setError([Link]);
}finally{
setLoading(false);
}
};
fetchData();
}, []);
return(
<div>
{loading ? <p> Loading ... </p> : error ? <p>Error: {error}</p> : (
<ul>
{[Link](item => (
<li key={[Link]}>{[Link]}</li>
))}
</ul>
)}
</div>
);
};

====================== Task 10: Creating a Todo List


Application==============================
import React, { useState } from 'react';
import { styles } from './[Link]';

export const TodoList = () => {


const [items, setItems] = useState([]);
const [inputValue, setInputValue] = useState('');

const handleInputChange = (event) => {


setInputValue([Link]);
};

const handleSubmit = (event) => {


[Link]();
if ([Link]()) {
setItems((prevItems) => [...prevItems, inputValue]);
setInputValue(''); // Clear input field after submission
}
};

const handleRemoveItem = (index) => {


setItems((prevItems) => [Link]((_, i) => i !== index));
};

return (
<>
<form onSubmit={handleSubmit}>
<input
className={[Link]}
type="text"
value={inputValue}
onChange={handleInputChange}
placeholder="Enter your item"
/>
<button className={[Link]} type="submit">Submit!</button>
</form>
<ul>
{[Link]((item, index) => (
<li key={index}>
{item}
<button onClick={() =>
handleRemoveItem(index)}>Remove</button>
</li>
))}
</ul>
</>
);
};

====================== Task 9: Styling Components with CSS


Modules==============================
//[Link]
.input {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-right: 10px;
}

.button {
padding: 10px 15px;
background-color: blue;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}

.greeting {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
}

// [Link]
import React, { useState } from 'react';
import {styles} from './[Link]';

export const GreetingForm = () => {


const [name, setName] = useState('');
const [greeting, setGreeting] = useState('');

const handleSubmit = (event) => {


[Link](); // Prevent the default form submission
if ([Link]()) {
setGreeting(`Hello, ${name}!`);
} else {
setGreeting('Please enter your name.');
}
};

const handleInputChange = (event) => {


setName([Link]);
};

return (
<>
<form onSubmit={handleSubmit}>
<input className={[Link]} type="text"
onChange={handleInputChange} placeholder="Enter your name" />
<button className={[Link]} type="submit">Submit!</button>
<p className={[Link]}>{greeting}</p>
</>
);
};

// [Link]
import React from 'react';
import ReactDOM from 'react-dom';
import { GreetingForm } from './GreetingForm';

function App() {
return (
<GreetingForm />
);
}

[Link](<App />, [Link]("root"));

====================== Task 8: Handling User Input with


Forms==============================
import React, { useState } from 'react';

export const GreetingForm = () => {


const [name, setName] = useState('');
const [greeting, setGreeting] = useState('');

const handleSubmit = (event) => {


[Link](); // Prevent the default form submission
if ([Link]()) {
setGreeting(`Hello, ${name}!`);
} else {
setGreeting('Please enter your name.');
}
};

const handleInputChange = (event) => {


setName([Link]);
};

return (
<>
<form onSubmit={handleSubmit}>
<input type="text" onChange={handleInputChange} placeholder="Enter
your name" />
<button type="submit">Submit!</button>
</form>
<p>{greeting}</p>
</>
);
};
// [Link]
import React from 'react';
import ReactDOM from 'react-dom';
import { GreetingForm } from './GreetingForm';

function App() {
return (
<GreetingForm />
);
}

[Link](<App />, [Link]("root"));

====================== Task 7: Conditional Rendering with State


==============================
import React from 'react';

export const ButtonComponent = ({ labelText1, labelText2, setLabelText1,


setLabelText2, label1, label2 }) => {

function handleClick1() {
setLabelText1((prevText) => prevText === label1 ? "Clicked!" : label1);
}

function handleClick2() {
setLabelText2((prevText) => prevText === label2 ? "Clicked!" : label2);
}

return (
<>
<h1>Hello, React World!</h1>
<button style={{ padding: '10px', color: 'white', backgroundColor:
'red' }} onClick={handleClick1}>
{labelText1}
</button>
<button style={{ padding: '10px', color: 'white', backgroundColor:
'blue' }} onClick={handleClick2}>
{labelText2}
</button>

{/* Conditional rendering for message */}


{labelText1 === "Clicked!" && <p>Red button clicked!</p>}
{labelText2 === "Clicked!" && <p>Blue button clicked!</p>}
</>
);
};

import React, { useState } from 'react';


import ReactDOM from 'react-dom';
import { ButtonComponent } from './ButtonComponent';

function App() {
const [labelText1, setLabelText1] = useState("Click Red Button");
const [labelText2, setLabelText2] = useState("Click Blue Button");

return (
<ButtonComponent
labelText1={labelText1}
labelText2={labelText2}
setLabelText1={setLabelText1}
setLabelText2={setLabelText2}
label1="Click Red Button"
label2="Click Blue Button"
/>
);
}

[Link](<App />, [Link]("root"));

====================== Task 6: Lifting State Up ==============================

// [Link]
import React from 'react';

export const ButtonComponent = ({ labelText1, labelText2, setLabelText1,


setLabelText2, label1, label2 }) => {

function handleClick1() {
setLabelText1((prevText) => prevText === label1 ? "Clicked!" : label1);
}

function handleClick2() {
setLabelText2((prevText) => prevText === label2 ? "Clicked!" : label2);
}

return (
<>
<h1> Hello, React World! </h1>
<button style={{ padding: '10px', color: 'white', backgroundColor:
'red' }} onClick={handleClick1}>
{labelText1}
</button>
<button style={{ padding: '10px', color: 'white', backgroundColor:
'blue' }} onClick={handleClick2}>
{labelText2}
</button>
</>
);
};

// [Link]
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import { ButtonComponent } from './ButtonComponent';

function App() {
const [labelText1, setLabelText1] = useState("Click Red Button");
const [labelText2, setLabelText2] = useState("Click Blue Button");

return (
<ButtonComponent
labelText1={labelText1}
labelText2={labelText2}
setLabelText1={setLabelText1}
setLabelText2={setLabelText2}
label1="Click Red Button"
label2="Click Blue Button"
/>
);
}

[Link](<App />, [Link]("root"));

====================== Task 5: Handling Multiple Button States


==============================

import React, {useState} from 'react';

export const ButtonComponent = ({label1, label2}) => {


const[labelText1, setLabelText1] = useState(label1);
const[labelText2, setLabelText2] = useState(label2);

function handleClick() {
setLabelText1((prevText) => prevText === label1 ? "Clicked!" : label1);
}
function handleClick2() {
setLabelText2((prevText) => prevText === label2 ? "Clicked!" : label2);
}

return (
<>
<h1> Hello, React World! </h1>
<button style={{padding: '10px', color: 'white' , backgroundColor:
'red'}} onClick={handleClick}> {labelText1} </button>
<button style={{padding: '10px', color: 'white' , backgroundColor:
'blue'}} onClick={handleClick2}> {labelText2} </button>
</>
);
};

// [Link]
import React from 'react';
import ReactDOM from 'react-dom';
import {ButtonComponent} from './ButtonComponent';

function App() {
return (
<ButtonComponent label1 = "Click Red Button", label2 = "Click Blue Button"/>
);
}
[Link](<App />, [Link]("root"));

====================== Task 4: State Management with useState


==============================

import React, {useState} from 'react';

export const ButtonComponent = ({label}) => {


const[labelText, setLabelText] = useState(label);

function handleClick() {
setLabelText((prevText) => prevText === label ? "Clicked!" : label);
}
return (
<>
<h1> Hello, React World! </h1>
<button style={{padding: '10px', color: 'white' , backgroundColor:
'red'}} onClick={handleClick}> {labelText} </button>
</>
);
};

// [Link]
import React from 'react';
import ReactDOM from 'react-dom';
import {ButtonComponent} from './ButtonComponent';

function App() {
return (
<ButtonComponent label = "Press here"/>
);
}
[Link](<App />, [Link]("root"));

====================== Task 3: Passing Props to Components


==============================

import React from 'react';

export const ButtonComponent = ({label}) => {


function handleClick (){
[Link]("Button was clicked!");
}
return (
<>
<h1> Hello, React World! </h1>
<button style={{padding: '10px', color: 'white' , backgroundColor:
'red'}} onClick={handleClick}> {label} </button>
</>
);
};

// [Link]
import React from 'react';
import ReactDOM from 'react-dom';
import {ButtonComponent} from './ButtonComponent';

function App() {
return (
<ButtonComponent label = "Press here"/>
);
}
[Link](<App />, [Link]("root"));

====================== Task 2: Adding and Styling a Button Component


=================================

import React from 'react';

export const ButtonComponent = () => {


function handleClick (){
[Link]("Button was clicked!");
}
return (
<>
<h1> Hello, React World! </h1>
<button style={{padding: '10', color: 'white' , backgroundColor: 'red'}}
onClick={handleClick}> Click Me! </button>
</>
);
};

// [Link]
import React from 'react';
import ReactDOM from 'react-dom';
import {ButtonComponent} from './ButtonComponent';

function App() {
return (
<ButtonComponent />
);
}

[Link](<App />, [Link]("root"));

====================== Task 1: Setting Up a Basic React Project


=================================

import React from 'react';

export const Greeting = () => {


return (
<>
<h1> Hello, React World! </h1>
</>
);
};

// [Link]
import React from 'react';
import ReactDOM from 'react-dom';
import {Greeting} from './Greeting';

function App() {
return (
<Greeting />
);
}

[Link](<App />, [Link]("root"));

Common questions

Powered by AI

CSS modules in React allow for scoped and modular styling by generating unique class names at build time, preventing conflicts and enabling local styles that do not affect other parts of the application. Unlike global CSS which can inadvertently affect unrelated components due to cascading and specificity issues, CSS modules ensure styles apply only to their respective components by using unique identifiers. This encapsulation of styles is demonstrated in tasks like the GreetingForm which uses class names from a CSS module for its input and button elements .

Lifting state involves moving shared state up to the closest common ancestor of components that require access to it, improving component-based design by enhancing modularity and reducing code duplication. By having a single source of truth, synchronization between different components is ensured, which is crucial for predictable and consistent UI behavior. In the ButtonComponent example, lifting state up to the parent component App enables the click handlers to update state across potentially numerous ButtonComponent instances, ensuring they all respond to changes coherently .

Implementing a countdown timer using React Hooks like useState and useEffect is advantageous due to the functional components' streamlined state management capabilities. useState allows for declaring state variables, like count, directly in a component, simplifying state handling. useEffect enables side effects, such as setting and clearing intervals, to manage the countdown's timing effectively while keeping the logic self-contained and expressive. The hooks' combination allows for a clean implementation of the timer logic within a single functional component, maintaining the stateless nature of React .

Conditional rendering in React, such as what is implemented in the ButtonComponent, allows components to render different outputs based on the application's state. For example, when buttons are clicked, their labels change to 'Clicked!' which alters the UI dynamically based on user interactions. This increases user engagement by providing immediate feedback, making the application feel more interactive and responsive. This is particularly notable when one button click conditionally renders a message like 'Red button clicked!' or 'Blue button clicked!' .

The useEffect hook in React facilitates the handling of side effects in functional components, such as fetching data, directly interacting with DOM elements, or starting timers. By accepting a function as the first argument and an optional dependency array as the second, useEffect can execute the side effect function on mount, update, or unmount, depending on the dependencies listed. For instance, in a countdown timer component, useEffect is used to decrement the count every second, setting it up when the timer starts and cleaning up the interval when it pauses or resets .

React's component reusability enhances application development by promoting code efficiency and consistency across the application. Reusable components allow developers to write the code once and use it in multiple places without duplication, unique styling, or inconsistent behavior. This modularity simplifies maintenance, testing, and refactoring, enabling teams to easily scale applications. Button components or input fields, with props for text and handlers, can be reused in different contexts while maintaining cohesive styling and logic, significantly accelerating development time .

Using React's useEffect hook with an empty dependency array is beneficial when fetching data because it ensures the fetch operation occurs only once during the component's lifecycle. This mimicry of componentDidMount behavior is crucial for preventing multiple redundant fetch requests on state changes or rerenders, optimizing network efficiency and application performance. It is particularly effective in initial data population scenarios such as rendering a countdown timer or list of posts upon component mount without unnecessary repetitions of the fetch logic .

React's useState allows developers to track and update state seamlessly within functional components, facilitating the building of interactive UI elements like forms and buttons. This hook provides a straightforward API to define state variables and update them with set functions, enabling inputs to reflect dynamic user interactions in real-time. For example, forms can manage input values and offer immediate feedback by updating error messages or greeting texts based on user input, as seen in the GreetingForm where user-submitted names dynamically alter the greeting message .

Not using a cleanup function with intervals in useEffect can lead to continued execution of intervals even after components unmount or are paused, resulting in memory leaks and unexpected behavior such as incorrect timing events. The cleanup function ensures that resources are released when the component unmounts, preventing them from accumulating and causing performance degradation. This is crucial for components like timers that rely on intervals; without proper cleanup, these components could continue to process background tasks unnecessarily, leading to inefficient resource use .

Error handling in asynchronous requests is critical for providing robust user experiences in React applications. Without proper error handling, users might encounter uninformative failures or application crashes when network issues occur or when resource endpoints fail. Implementing error handling, such as using try-catch statements with fetch requests, allows applications to catch these errors and update the UI appropriately, informing the user of issues and possibly suggesting corrective actions. For example, a DataFetcher updates the UI to display 'Network response was not ok' when the fetch fails, maintaining transparency and application stability .

You might also like