Реактивӣ амалҳо бар рӯи массивҳои объектҳо дар React

Биёед ҳоло биомӯзем, ки чӣ гуна амалҳои реактивӣ бар рӯи массивҳои объектҳо анҷом диҳем. Дар ин ҳолат мо бояд ба функсияи 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>;
}

Барои он ки чизеро бо унсур анҷом диҳем, мо аввал бояд онро ёфта, тамоми массивро бо давр такрор кунем:

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-и мувофиқ ворид мешаванд.