Operesheni za Mitindo kwa Vitu vya Array katika React

Hebu sasa tujifunze kufanya operesheni za mitindo kwa vitu vya array. Katika kesi hii tunahitaji kupitisha kwenye kitendakazi id kipengele cha array, ambacho tunakusudi kufanya kitu nacho:

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

Ili kufanya kitu na kipengele, kwanza tunahitaji kukipata, kwa kupitia array nzima kwa kitanzi:

function App() {
	...
	
	function doSmth(id) {
		setNotes(notes.map(note => {
			if (note.id === id) {
				// kufanya kitu na kipengele
			}
			
			return note;
		}));
	}
}

Hebu kwa mfano tubadilishe maandishi ya kitu kilichopatikana:

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

Mwisho wa kila li fanya kifungo, kwa kubonyeza ambayo hii li itaondolewa kwenye orodha.

Kuna maingizo matatu. Mwisho wa kila li fanya kifungo, kwa kubonyeza ambayo data ya kitu cha li hii itaingizwa kwenye maingizo yanayofanana.

Badilisha shida iliyotangulia ili, kando ya maingizo kuwe na kifungo, kwa kubonyeza ambayo data ya maingizo itaingizwa kwenye li inayofanana.