Reaktiv massivə obyekt əlavə etmə React-də

Gəlin indi obyekt massivinin reaktivliyini öyrənək. Bu halda biz hər hansı dəyişiklik etmək üçün obyektlərin içində saxlanılan id-lərə istinad etməliyik.

Gəlin cəhd edək. Tutaq ki, bizim aşağıdakı obyekt massivimiz var:

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

Gəlin massivimizin hər bir elementini ayrı bir li teqində çıxaraq:

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

Bir düymə hazırlayın, kliklədikdə massivin sonuna yeni element əlavə etsin, beləliklə ul teqinin sonuna yeni bir li əlavə olunsun.

Üç input və bir düymə hazırlayın. Düyməyə basıldıqda input məlumatlarından istifadə edərək ul teqinin sonunda yeni bir li yaradın.