React හි වස්තූන්ගේ අරා වලට ප්‍රතික්‍රියාශීලී මෙහෙයුම්

දැන් අපි වස්තූන්ගේ අරා වලට ප්‍රතික්‍රියාශීලී මෙහෙයුම් කරන්න ඉගෙන ගනිමු. මෙම සිද්ධියේ දී, අපි කිසියම් දෙයක් කිරීමට හදනු ලබන අරයෙහි මූලද්‍රව්‍යයේ id ශ්‍රිතයට සම්ප්‍රේෂණය කළ යුතුය:

jsxfunction App() {
  const [notes, setNotes] = useState(initNotes);
  
  const result = notes.map(note => {
    return <li key={note.id}>
      <span>{note.prop1}</span>
      <span>{note.prop2}</span>
      <span>{note.prop3}</span>
      
      <button onClick={() => doSmth(note.id)}>
        btn
      </button>
    </li>;
  });
  
  return <div>
    <ul>
      {result}
    </ul>
  </div>;
}

මූලද්‍රව්‍යයක් සමඟ කිසියම් දෙයක් කිරීම සඳහා, පළමුව අපි එය සොයා ගත යුතු අතර, එය සඳහා සම්පූර්ණ අරය ලූපයකින් ගමන් කළ යුතුය:

jsxfunction App() {
  ...
  
  function doSmth(id) {
    setNotes(notes.map(note => {
      if (note.id === id) {
        // මූලද්‍රව්‍යය සමඟ කිසියම් දෙයක් කරන්න
      }
      
      return note;
    }));
  }
}

උදාහරණයක් ලෙස, සොයාගත් වස්තුවේ ලියවිලි වෙනස් කරමු:

jsxfunction App() {
  ...
  
  function doSmth(id) {
    setNotes(notes.map(note => {
      if (note.id === id) {
        note.prop1 += '!';
        note.prop2 += '!';
        note.prop2 += '!';
        
        return note;
      }
      
      return note;
    }));
  }
}