React में ऑब्जेक्ट्स की arrays पर reactive ऑपरेशन्स

आइए अब ऑब्जेक्ट्स की arrays पर reactive ऑपरेशन्स करना सीखते हैं। इस मामले में हमें फ़ंक्शन में array के उस एलिमेंट का 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>;
}

किसी एलिमेंट के साथ कुछ करने के लिए, हमें पहले इसे पूरी array को लूप से पार करके ढूंढना होगा:

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;
    }));
  }
}