පාඩම 5: වැඩිදුර විශේෂාංග

විශේෂාංගය 1: 'Step' අගයක් එකතු කිරීම 🔢

දැනට අපේ කවුන්ටරය එකකින් වැඩි වීම සහ අඩු වීම පමණයි කරන්නේ. පරිශීලකයාට අවශ්‍ය අගයකින් (උදා: 5න්, 10න්) කවුන්ටරය වෙනස් කිරීමට ඉඩ ලබා දීම සඳහා, අපි input field එකක් එකතු කරමු.

මේ සඳහා අපට අලුත් state variable එකක් අවශ්‍ය වෙනවා. අපි එය `step` ලෙස නම් කරමු.

`step` state එක නිර්මාණය කිරීම: `count` state එක සෑදූ ආකාරයටම, `step` සඳහා ද `useState` Hook එක භාවිත කරමු. එහි ආරම්භක අගය 1 ලෙස ලබා දෙමු.
Input field එක JSX වලට එකතු කිරීම: පරිශීලකයාට step අගය ඇතුලත් කිරීමට `` එකක් එකතු කරමු.
Controlled Component එකක් සෑදීම: React වලදී, input field එකක අගය state එකක් සමග සම්බන්ධ කිරීම "controlled component" එකක් ලෙස හැඳින්වේ. අපි input එකේ `value` එක `step` state එකටත්, `onChange` event එක `setStep` function එකටත් සම්බන්ධ කරමු.
`increment` සහ `decrement` functions වෙනස් කිරීම: දැන් 1 එකතු කරනවා වෙනුවට, `step` state එකේ ඇති අගය එකතු/අඩු කළ යුතුය. Input field එකෙන් ලැබෙන අගය string එකක් නිසා, එය `Number()` භාවිතයෙන් අංකයක් බවට පරිවර්තනය කිරීම වැදගත් වේ.

විශේෂාංගය 2: `localStorage` සමඟ දත්ත රඳවා තබා ගැනීම 💾

දැනට, අපි browser page එක refresh කළහොත්, කවුන්ටරයේ අගය නැවත 0 බවට පත් වේ. මෙම අගය මැකී නොගොස් මතක තබා ගැනීමට, අපි browser එකේ ඇති `localStorage` නම් පහසුකම භාවිත කරමු.

මෙය ක්‍රියාත්මක කිරීමට අපට පියවර දෙකක් අවශ්‍යයි:

පියවර A: `count` අගය වෙනස් වන විට එය `localStorage` හි save කිරීම.
මෙය side effect එකක් නිසා, අපි මේ සඳහා `useEffect` Hook එකක් භාවිත කරමු. මෙම effect එක `count` state එක මත depend විය යුතුය.
පියවර B: Component එක මුලින්ම load වන විට `localStorage` හි අගයක් ඇත්දැයි බලා එය `count` state එකට ලබා දීම.
මේ සඳහා අපි `useState` හි "lazy initial value" නම් ක්‍රමවේදය භාවිත කරමු. එනම්, ආරම්භක අගය ලෙස කෙලින්ම 0 ලබා දෙනවා වෙනුවට, function එකක් ලබා දී, එම function එක තුල `localStorage` එක check කර අගය return කරමු.

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

දැන් ඉහත විශේෂාංග දෙකම ඇතුලත් වන පරිදි, ඔබේ `src/Counter.jsx` ගොනුවේ සම්පූර්ණ කේතය පහත කේතයෙන් replace කරන්න.

                        
// src/Counter.jsx

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

export default function Counter() {
  // localStorage වෙතින් ආරම්භක අගය ලබා ගැනීම
  const [count, setCount] = useState(() => {
    const savedCount = localStorage.getItem('count');
    // අගයක් ඇත්නම් එය Number එකක් ලෙස return කරන්න, නැත්නම් 0 return කරන්න
    return savedCount !== null ? Number(savedCount) : 0;
  });

  // step අගය සඳහා state එකක්
  const [step, setStep] = useState(1);

  // count අගය වෙනස් වන විට document.title එක update කිරීම
  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]);

  // count අගය වෙනස් වන විට එය localStorage හි save කිරීම
  useEffect(() => {
    localStorage.setItem('count', count);
  }, [count]);

  const increment = () => setCount(c => c + Number(step || 1));
  const decrement = () => setCount(c => c - Number(step || 1));
  const reset = () => {
      setCount(0);
      setStep(1); // Reset කරන විට step එකත් 1 කරමු
  };

  return (
    <div className="counter">
      <div className="display">
        Count: <strong>{count}</strong>
      </div>

      <div className="controls">
        <button onClick={decrement} aria-label="decrement">-</button>
        <button onClick={increment} aria-label="increment">+</button>
        <button onClick={reset}>Reset</button>
      </div>

      <div className="step">
        <label>
          Step:
          <input
            type="number"
            min="1"
            value={step}
            onChange={e => setStep(e.target.value)}
          />
        </label>
      </div>
    </div>
  );
}
                        
                    

එමෙන්ම, අලුතින් එකතු කළ input field එකට අදාළ style එක සඳහා, `src/index.css` ගොනුවට පහත CSS කොටස එකතු කරන්න (බොහෝවිට මෙය දැනටමත් ඔබ පෙර පාඩම් වලදී ඇතුලත් කර ඇති CSS කේතයේ තිබිය හැක).

                        
/* src/index.css ගොනුවට එකතු කරන්න */

.step {
  margin-top: 1.5rem;
  color: var(--muted);
}

.step input {
  margin-left: 0.5rem;
  width: 70px;
  padding: 0.25rem 0.4rem;
  border: 1px solid #ced4da;
  border-radius: 4px;
}
                        
                    

පරීක්ෂා කර බලන්න! 🧪

ගොනු save කළ පසු, browser එකේ app එක බලන්න. කවුන්ටරයේ අගය වෙනස් කර, page එක refresh කරන්න. අගය මැකී නොගොස් එලෙසම තිබෙනු ඔබට පෙනෙනු ඇත! එමෙන්ම, step අගය වෙනස් කර `+` හෝ `-` බොත්තම් click කර බලන්න.