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'ге түшсүн.