📄 Assignments Of Class 5State in React
🔸 Assignment 1: Create a
Basic Counter
Task:Create a React component that displays a counter starting from 0. It should
have two buttons — one for incrementing and another for decrementing the value.
Solution:
import React, { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<h2>Count: {count}</h2>
<button onClick={() => setCount(count + 1)}>Increment</button>
<button onClick={() => setCount(count - 1)}>Decrement</button>
</div>
);
}
export default Counter;
🔸 Assignment 2: Add a Reset
Button
Task:Extend the previous counter by adding a Reset button that resets the
counter to 0.
Solution:
<button onClick={() => setCount(0)}>Reset</button>
Add
this button to the previous Counter component.
🔸 Assignment 3:
Increment/Decrement by a Step Value
Task:Modify the counter so it increases/decreases by 5 instead of 1.
Solution:
const step = 5;
<button onClick={() => setCount(count + step)}>Increment</button>
<button onClick={() =>
setCount(count - step)}>Decrement</button>
🔸 Assignment 4: Use Input
for Dynamic Step Value
Task:Let the user enter a step value. Use that value for increment/decrement.
Solution:
const [count, setCount] = useState(0);
const [step, setStep] = useState(1);
<input
type="number"
value={step}
onChange={(e) => setStep(Number(e.target.value))}
/>
<button onClick={() =>
setCount(count + step)}>+</button>
<button onClick={() =>
setCount(count - step)}>-</button>
🔸 Assignment 5: Show
Even/Odd Status
Task:Display whether the current count is Even or Odd.
Solution:
<h3>Status: {count % 2 === 0 ? 'Even' : 'Odd'}</h3>
Place
this below the count display.
🔸 Assignment 6: Disable
Decrement When Count is 0
Task:Disable the decrement button if the count is 0 or less.
Solution:
<button onClick={() => setCount(count - 1)} disabled={count <= 0}>
Decrement
</button>
🔸 Assignment 7: Track Number
of Clicks
Task:Add a second state variable clicks that tracks how many times a button has been
clicked.
Solution:
const [clicks, setClicks] = useState(0);
const handleIncrement = () => {
setCount(count + 1);
setClicks(clicks + 1);
};
<button onClick={handleIncrement}>Increment</button>
<h3>Total Clicks: {clicks}</h3>
🔸 Assignment 8: Change
Background Color Based on Count
Task:If the count is greater than 10, change background to green; if less than 0,
red; otherwise white.
Solution:
const getBackgroundColor = () => {
if (count > 10) return 'lightgreen';
if (count < 0) return 'lightcoral';
return 'white';
};
<div style={{ backgroundColor: getBackgroundColor(),
padding: '20px' }}>
...
</div>
🔸 Assignment 9: Prevent
Count from Going Above 20
Task:Prevent the counter from going above 20.
Solution:
<button onClick={() => count < 20 && setCount(count + 1)}>
Increment
</button>
🔸 Assignment 10: Store
Previous Value of Count
Task:Store and display the previous value of count using another state.
Solution:
const [prevCount, setPrevCount] = useState(null);
const handleIncrement = () => {
setPrevCount(count);
setCount(count + 1);
};
<h3>Previous: {prevCount}</h3>
✅ Summary of Concepts Covered:
|
Assignment |
Concept |
|
1 |
Basic useState setup |
|
2 |
Reset functionality |
|
3 |
Custom increment/decrement step |
|
4 |
Dynamic step value using input |
|
5 |
Conditional rendering (Even/Odd) |
|
6 |
Button disabling based on state |
|
7 |
Managing multiple states |
|
8 |
Conditional styling |
|
9 |
Limiting state value |
|
10 |
Tracking previous state |
