පාඩම 6: State යාවත්කාලීන කිරීමේදී Logic එකතු කිරීම 🧠

අපගේ event handler functions තුලට шарт logic (conditional logic) එකතු කර, app එකේ ක්‍රියාකාරීත්වය වඩාත් පාලනය කරන ආකාරය ඉගෙන ගනිමු.

---

ගැටලුව: Counter එක සෘණ අගයක් වීම

ඔබ අපගේ වත්මන් app එකේ "Minus (-)" බොත්තම දිගින් දිගටම click කළහොත්, counter එකේ අගය -1, -2, ... ලෙස සෘණ අගයක් වන බව පෙනෙනු ඇත. බොහෝ අවස්ථා වලදී, counter එකක් 0 ට වඩා අඩු වීම වැළැක්වීමට අපට අවශ්‍ය වේ. මෙම ගැටලුව විසඳීමට, අප `handleDecrement` function එකට කුඩා logic කැබැල්ලක් එක් කළ යුතුය.

---

සජීවී ආදර්ශනය (Live Demo) 🚀

මෙම පාඩම අවසානයේදී, අපගේ Counter App එකේ "Minus (-)" බොත්තම 0 දී නැවතෙනු ඇත. පහත ආදර්ශනයේ "Minus (-)" බොත්තම click කර වෙනස බලන්න.

---

Event Handler එකට `if` Condition එකක් එකතු කිරීම

මෙම ගැටලුව විසඳීමට, අපට `handleDecrement` function එක තුල `if` statement එකක් භාවිතා කළ හැක. `setCount` function එක call කිරීමට පෙර, `count` එකේ වත්මන් අගය 0 ට වඩා වැඩි දැයි අප පරීක්ෂා කළ යුතුය. අගය 0 ට වඩා වැඩි නම් පමණක්, එය 1කින් අඩු කිරීමට අපට `setCount` call කළ හැක.

// src/App.jsx

const handleDecrement = () => {
  // if condition එකක් මගින් count එකේ අගය පරීක්ෂා කිරීම
  if (count > 0) {
    setCount(count - 1);
  }
};

මෙම වෙනස මගින්, `count` එකේ අගය 0 වූ විට, `if (count > 0)` යන шартය `false` වේ. එවිට `setCount(count - 1)` යන කේතය ක්‍රියාත්මක නොවන අතර, counter එක 0 දී නතර වේ.

යාවත්කාලීන කරන ලද සම්පූර්ණ කේතය

මෙම කුඩා වෙනස සමඟ, අපගේ `App.jsx` ගොනුවේ අවසන් කේතය මෙසේ දිස්වනු ඇත.

// src/App.jsx (යාවත්කාලීන කරන ලද කේතය)

import { useState } from 'react';

function App() {
  const [count, setCount] = useState(0);

  const handleIncrement = () => {
    setCount(count + 1);
  };

  const handleDecrement = () => {
    // Logic එක මෙතනට එකතු කර ඇත
    if (count > 0) {
      setCount(count - 1);
    }
  };

  const handleReset = () => {
    setCount(0);
  };

  return (
    <div className="container mt-5">
      <div className="row justify-content-center">
        <div className="col-md-6">
          <div className="card text-center">
            <div className="card-header">
              React Counter App
            </div>
            <div className="card-body">
              <h1 className="display-1">{count}</h1>
            </div>
            <div className="card-footer">
              <button className="btn btn-success me-2" onClick={handleIncrement}>Plus (+)</button>
              <button className="btn btn-warning me-2" onClick={handleReset}>Reset</button>
              <button className="btn btn-danger" onClick={handleDecrement}>Minus (-)</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export default App

ප්‍රතිඵලය (Result)

මෙම වෙනස save කර, ඔබගේ project එකේ browser window එක බලන්න. දැන් "Minus (-)" බොත්තම 0 දී නතර වන බව ඔබට දැකගත හැකි වනු ඇත.

වැදගත් කරුණ: Event handlers යනු state එක යාවත්කාලීන කිරීමට පමණක් නොව, state එක යාවත්කාලීන කිරීමට පෙර යම් යම් නීති සහ шарт පරීක්ෂා කිරීම වැනි logic ක්‍රියාත්මක කිරීමටද ඉතා ප්‍රයෝජනවත් වේ.

⬅️ මුල් පිටුවට