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

आइए अब ऑब्जेक्ट्स की arrays पर reactive ऑपरेशन्स करना सीखते हैं। इस मामले में हमें फ़ंक्शन में array के उस एलिमेंट का id पास करना होगा, जिसके साथ हम कुछ करने जा रहे हैं:

function 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 को लूप से पार करके ढूंढना होगा:

function App() {
	...
	
	function doSmth(id) {
		setNotes(notes.map(note => {
			if (note.id === id) {
				// एलिमेंट के साथ कुछ करते हैं
			}
			
			return note;
		}));
	}
}

आइए उदाहरण के लिए मिले ऑब्जेक्ट के टेक्स्ट बदल दें:

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

प्रत्येक li के अंत में एक बटन बनाएं, जिस पर क्लिक करने पर यह li लिस्ट से हट जाएगी।

तीन इनपुट दिए गए हैं। प्रत्येक li के अंत में एक बटन बनाएं, जिस पर क्लिक करने पर उस li के ऑब्जेक्ट का डेटा संबंधित इनपुट में आ जाएगा।

पिछले टास्क को इस तरह संशोधित करें, कि इनपुट्स के बगल में एक बटन हो, जिस पर क्लिक करने पर इनपुट्स का डेटा संबंधित li में आ जाएगा।