React में रिएक्टिव ऐरे ऑपरेशंस

आइए अब सीखते हैं कि ऐरे के एलिमेंट्स के साथ रिएक्टिव मैनिपुलेशन कैसे करते हैं। इसके लिए हम प्रत्येक li पर एक इवेंट हैंडलर लगाएंगे, जिसमें हम इस 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);
  }
}