Reactda Ob'ektlar Massivi Ustida Reaktiv Amallar

Keling, endi ob'ektlar massivi ustida reaktiv amallarni bajarishni o'rganaylik. Bu holatda biz funktsiyaga massiv elementining id sini o'tkazishimiz kerak, biz bilan nima qilmoqchi ekanligimiz:

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

Element bilan nimadir qilish uchun, biz avval uni butun massivni aylantirib topishimiz kerak:

function App() {
	...
	
	function doSmth(id) {
		setNotes(notes.map(note => {
			if (note.id === id) {
				// element bilan nimadir qilamiz
			}
			
			return note;
		}));
	}
}

Keling, misol uchun topilgan ob'ektning matnlarini o'zgartirib ko'ramiz:

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

Har bir li oxirida tugma qiling, unga bosganda bu li ro'yxatdan o'chirilsin.

Uchta input berilgan. Har bir li oxirida tugma qiling, unga bosganda shu li ob'ektining ma'lumotlari mos keladigan inputlarga tushsin.

Oldingi vazifani shunday o'zgartiringki, inputlar yonida tugma bo'lsin, unga bosganda inputlarning ma'lumotlari mos keladigan li ga tushsin.