Uongezaji wa Mitindo wa React kwa Safu ya Vitu katika React

Hebu sasa tujifunze uwezo wa kuitikia kwa safu ya vitu. Katika kesi hii, tunapaswa kufanya mabadiliko yoyote, kukiashiria vipengee kwa id, ambazo zimehifadhiwa ndani ya vitu wenyewe.

Hebu tujaribu. Hebu tuseme tuna safu ifuatayo ya vitu:

const initNotes = [
	{
		id: 'GYi9G_uC4gBF1e2SixDvu',
		prop1: 'value11',
		prop2: 'value12',
		prop3: 'value13',
	},
	{
		id: 'IWSpfBPSV3SXgRF87uO74',
		prop1: 'value21',
		prop2: 'value22',
		prop3: 'value23',
	},
	{
		id: 'JAmjRlfQT8rLTm5tG2m1L',
		prop1: 'value31',
		prop2: 'value32',
		prop3: 'value33',
	},
];

Wacha tuonyeze kila kipengele cha yetu safu kwenye lebo tofauti ya li:

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>
		</li>;
	});
	
	return <div>
		<ul>
			{result}
		</ul>
	</div>;
}

Tengeneza kifungo, ubonyeze juu yake kipengele kipya kitaongezwa mwishoni mwa safu, na hivyo kuongeza kipya li mwishoni mwa lebo ul.

Tengeneza viingilio vitatu na kifungo. Kwa kubonyeza kwenye kifungo kutoka kwa data ya kuingilia tengeneza mpya li mwishoni mwa lebo ul.