Assignments Of Day 11: React Hooks Overview
Assignment 1: Counter
Component
Task:
Create a counter component with buttons to increment and decrement the count.
Solution:
jsx
Copy code
import React, { useState
} from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<p>Count: {count}</p>
<button onClick={() =>
setCount(count + 1)}>Increment</button>
<button onClick={() =>
setCount(count - 1)}>Decrement</button>
</div>
);
}
export default Counter;
Assignment 2: Toggle
Visibility
Task:
Create a button to toggle the visibility of a message.
Solution:
jsx
Copy code
import React, { useState
} from "react";
function ToggleMessage()
{
const [isVisible, setIsVisible] = useState(true);
return (
<div>
<button onClick={() =>
setIsVisible(!isVisible)}>
{isVisible ? "Hide" :
"Show"} Message
</button>
{isVisible && <p>Hello,
this is a toggleable message!</p>}
</div>
);
}
export default ToggleMessage;
Assignment 3: Timer with
Start/Stop
Task:
Create a timer that starts and stops using useEffect.
Solution:
jsx
Copy code
import React, { useState,
useEffect } from "react";
function Timer() {
const [seconds, setSeconds] = useState(0);
const [isRunning, setIsRunning] = useState(false);
useEffect(() => {
if (!isRunning) return;
const interval = setInterval(() => {
setSeconds((prev) => prev + 1);
}, 1000);
return () => clearInterval(interval);
}, [isRunning]);
return (
<div>
<p>Time: {seconds} seconds</p>
<button onClick={() =>
setIsRunning(true)}>Start</button>
<button onClick={() =>
setIsRunning(false)}>Stop</button>
</div>
);
}
export default Timer;
Assignment 4: Fetch Data
Task:
Fetch and display a list of users from an API using useEffect.
Solution:
jsx
Copy code
import React, { useState,
useEffect } from "react";
function UserList() {
const [users, setUsers] = useState([]);
useEffect(() => {
fetch("https://jsonplaceholder.typicode.com/users")
.then((response) => response.json())
.then((data) => setUsers(data));
}, []);
return (
<div>
<h3>User List</h3>
<ul>
{users.map((user) => (
<li key={user.id}>{user.name}</li>
))}
</ul>
</div>
);
}
export default UserList;
Assignment 5: Theme
Toggle using useContext
Task:
Create a theme toggle system using useContext.
Solution:
jsx
Copy code
import React, {
createContext, useContext, useState } from "react";
const ThemeContext = createContext();
function ThemeProvider({
children }) {
const [theme, setTheme] = useState("light");
return (
<ThemeContext.Provider value={{ theme, setTheme
}}>
{children}
</ThemeContext.Provider>
);
}
function ThemeToggle() {
const { theme, setTheme } = useContext(ThemeContext);
return (
<button onClick={() => setTheme(theme
=== "light" ? "dark" : "light")}>
Toggle to {theme === "light" ?
"dark" : "light"} mode
</button>
);
}
function App() {
return (
<ThemeProvider>
<ThemeToggle />
</ThemeProvider>
);
}
export default App;
Assignment 6: Character
Count
Task:
Create a text input that displays the number of characters entered.
Solution:
jsx
Copy code
import React, { useState
} from "react";
function CharacterCount()
{
const [text, setText] = useState("");
return (
<div>
<textarea
value={text}
onChange={(e) =>
setText(e.target.value)}
placeholder="Type
something..."
></textarea>
<p>Character Count: {text.length}</p>
</div>
);
}
export default CharacterCount;
Assignment 7: Random
Number Generator
Task:
Create a component that generates a random number when a button is clicked.
Solution:
jsx
Copy code
import React, { useState
} from "react";
function RandomNumber() {
const [number, setNumber] = useState(0);
return (
<div>
<p>Random Number: {number}</p>
<button onClick={() => setNumber(Math.floor(Math.random()
* 100))}>
Generate Random Number
</button>
</div>
);
}
export default RandomNumber;
Assignment 8: Light/Dark
Mode
Task:
Implement a light/dark mode toggle using useState.
Solution:
jsx
Copy code
import React, { useState
} from "react";
function LightDarkMode()
{
const [isDarkMode, setIsDarkMode] = useState(false);
return (
<div style={{ background: isDarkMode ?
"black" : "white", color: isDarkMode ? "white" :
"black", padding: "20px" }}>
<p>The current mode is {isDarkMode
? "Dark" : "Light"} Mode.</p>
<button onClick={() =>
setIsDarkMode(!isDarkMode)}>Toggle Mode</button>
</div>
);
}
export default LightDarkMode;
Assignment 9: Search
Filter
Task:
Create a search filter for a list of items.
Solution:
jsx
Copy code
import React, { useState
} from "react";
function SearchFilter() {
const [query, setQuery] = useState("");
const items = ["Apple", "Banana",
"Cherry", "Date", "Elderberry"];
const filteredItems = items.filter((item)
=>
item.toLowerCase().includes(query.toLowerCase())
);
return (
<div>
<input
type="text"
placeholder="Search..."
value={query}
onChange={(e) => setQuery(e.target.value)}
/>
<ul>
{filteredItems.map((item, index) =>
(
<li key={index}>{item}</li>
))}
</ul>
</div>
);
}
export default SearchFilter;
Assignment 10: Counter
with Local Storage
Task:
Implement a counter component that saves its value to local storage.
Solution:
jsx
Copy code
import React, { useState,
useEffect } from "react";
function CounterWithStorage()
{
const [count, setCount] = useState(() => {
return parseInt(localStorage.getItem("count"))
|| 0;
});
useEffect(() => {
localStorage.setItem("count",
count);
}, [count]);
return (
<div>
<p>Count: {count}</p>
<button onClick={() =>
setCount(count + 1)}>Increment</button>
<button onClick={() =>
setCount(count - 1)}>Decrement</button>
</div>
);
}
export default CounterWithStorage;