React හි ප්‍රතික්‍රියාශීලී අරාව ක්‍රියා

දැන් අරාවක අංග සමඟ ප්‍රතික්‍රියාශීලීව ක්‍රියා කරන ආකාරය ඉගෙන ගනිමු. මෙය සිදු කිරීම සඳහා, අපි සෑම li ටැගයකටම අනුරූප අරාවෙහි එහි අනුක්‍රමණය පරාමිතියක් ලෙස යොමු කරන ඉසව්වක සැකසුම්කරුවෙකු යොදමු:

jsxfunction App() {
  const [notes, setNotes] = useState([1, 2, 3, 4, 5]);
  
  const result = notes.map((note, index) => {
    return <li key={index} onClick={() => doSmth(index)}>
      {note}
    </li>;
  });
  
  return <div>
    <ul>
      {result}
    </ul>
  </div>;
}

අපගේ ශ්‍රිතය තුළ, අපට අපගේ අරාවේ අංගයක් සමඟ ඕනෑම ක්‍රියාවක් සිදු කළ හැකිය:

jsxfunction App() {
  ...
  
  function doSmth(index) {
    let copy = Object.assign([], notes);
    copy[index] += '!'; // අංගය සමඟ යමක් කරන්න
    setNotes(copy);
  }
}