React-те объектілер массивін реактивті түрде қосу

Енді объектілер массивінің реактивтілігін үйренейік. Бұл жағдайда біз кез келген өзгерістерді жасауымыз керек, объектілердің ішінде сақталатын id бойынша элементтерге жүгіне отырып.

Көрейік. Бізде келесі объектілер массиві болсын:

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

Массивіміздің әрбір элементін жеке 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>;
}

Басылғанда массивтің соңына жаңа элемент қосылатын, осылайша ul тегінің соңына жаңа li қосатын батырма жасаңыз.

Үш енгізу өрісі мен батырма жасаңыз. Батырманы басқанда енгізу өрістерінің деректері бойынша ul тегінің соңына жаңа li жасаңыз.