Объектілер массиві бойынша реактивті операциялар 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.prop3 += '!';
				
				return note;
			}
			
			return note;
		}));
	}
}

Әрбір li соңында түйме жасаңыз, басқан кезде сол li тізімнен жойылады.

Үш инпут берілген. Әрбір li соңында түйме жасаңыз, басқан кезде сол li объектісінің деректері сәйкес инпуттарға түседі.

Алдыңғы тапсырманы өзгертіңіз, инпуттардың жанында түйме болсын, басқан кезде инпуттардың деректері сәйкес li-ге түседі.