Module 7 – Counter App එකට නව විශේෂාංග එකතු කිරීම
අපගේ මූලික app එක දැන් ක්රියාත්මකයි. දැන් අපි එය තවත් වැඩි දියුණු කරමු. State එක update කිරීමට විවිධ ක්රම භාවිතා කරමින් නව buttons කිහිපයක් එකතු කරමු.
අපි මෙම කොටසේදී නව files කිසිවක් එකතු නොකරමු. අපගේ සියලුම වෙනස්කම් App.jsx file එකට පමණක් සිදු කරනු ලැබේ. ඔබගේ වත්මන් project ව්යුහය මෙසේ දිස්විය යුතුය:
/src
├── /components
│ └── Header.jsx
├── App.css
├── App.jsx <-- අපි වැඩ කරන්නේ මෙතන
├── index.css
└── main.jsx
පළමුව, count අගය 1කින් අඩු කරන button එකක් එකතු කරමු. මෙය "Add" button එකට බෙහෙවින් සමානයි.
Logic එක එකතු කිරීම
onClick එකට ලබා දීමට නව function එකක් අවශ්යයි. මෙම function එක setCount call කර, පවතින count අගයෙන් 1ක් අඩු කරයි.
// App.jsx file එක තුළ
onClick={() => setCount(count - 1)}UI එකට Button එක එකතු කිරීම
දැන්, අපගේ JSX කේතයට නව button එකක් එකතු කර, ඉහත logic එක onClick එකට ලබා දෙමු.
<button
className="btn btn-warning"
onClick={() => setCount(count - 1)}
>
- Subtract
</button>දැන්, count අගය නැවත එහි ආරම්භක අගය වන `0` ට ගෙන ඒමට button එකක් සාදමු.
Logic එක එකතු කිරීම
මෙහිදී අපට අවශ්ය වන්නේ setCount function එකට `0` යන අගය ලබා දීම පමණි. එය ඉතා සරලයි.
onClick={() => setCount(0)}UI එකට Button එක එකතු කිරීම
අපගේ JSX කේතයට "Reset" button එකද එකතු කරමු.
<button
className="btn btn-danger"
onClick={() => setCount(0)}
>
Reset
</button>වත්මන් කේතයේ, පරිශීලකයාට count අගය ඍණ අගයක් දක්වා අඩු කළ හැක. අපි එය `0` ට වඩා අඩු වීම වළක්වමු.
මේ සඳහා, state එක update කිරීමට පෙර සරල `if` statement එකක් යොදාගත හැක. අපි මේ සඳහා වෙනම function එකක් නිර්මාණය කරමු.
function handleSubtract() {
if (count > 0) {
setCount(count - 1);
}
}දැන්, "Subtract" button එකේ `onClick` එකට මෙම function එක ලබා දෙන්න.
<button
className="btn btn-warning"
onClick={handleSubtract}
>
- Subtract
</button>count අගය 0ට වඩා වැඩි නම් පමණක් setCount ක්රියාත්මක වේ. count අගය 0 වන විට, if statement එක false වන නිසා කිසිවක් සිදු නොවේ.Module 7: කුඩා කාර්යය (Mini Task)
ඔබගේ App.jsx file එකට "Subtract" සහ "Reset" buttons දෙකම එකතු කරන්න. ඍණ අගයන් වැළැක්වීමේ logic එකද ඇතුළත් කිරීමට උත්සහ කරන්න.
අවසන් App.jsx කේතය මෙසේ දිස්විය යුතුය:
import { useState } from 'react';
import Header from './components/Header.jsx';
import './App.css';
function App() {
const [count, setCount] = useState(0);
// Function to handle subtraction with a condition
function handleSubtract() {
if (count > 0) {
setCount(count - 1);
}
}
return (
<>
<Header />
<main style={{ padding: '30px', textAlign: 'center' }}>
<h2 style={{ marginBottom: '20px' }}>React Counter App</h2>
<p style={{ fontSize: '3rem', fontWeight: 'bold', color: '#007bff' }}>
{count}
</p>
<div className="button-group">
<button className="btn btn-primary" onClick={() => setCount(count + 1)}>+ Add</button>
<button className="btn btn-warning" onClick={handleSubtract}>- Subtract</button>
<button className="btn btn-danger" onClick={() => setCount(0)}>Reset</button>
</div>
</main>
</>
);
}
export default App;
File එක save කර browser එකේ නව buttons සියල්ලම නිවැරදිව ක්රියා කරනවාදැයි පරීක්ෂා කරන්න.