Reaktīva objektu masīva pievienošana React

Tagad apgūsim objektu masīva reaktivitāti. Šajā gadījumā mums būs jāveic jebkādas izmaiņas, piekļūstot elementiem pēc id, kas glabājas pašos objektos.

Mēģināsim. Pieņemsim, ka mums ir šāds objektu masīvs:

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',
	},
];

Izvadīsim katru mūsu masīva elementu atsevišķā li tagā:

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

Izveidojiet pogu, kuras nospiešana pievienos jaunu elementu masīva beigās, tādējādi pievienojot jaunu li ul tagā.

Izveidojiet trīs ievades laukus un pogu. Nospiežot uz pogas, no ievades datiem izveidojiet jaunu li ul tagā.