Օբյեկտների զանգվածների ռեակտիվ գործողությունները 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-ում: