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га тушин.