React'tə Objeler Massivinə Reaktiv Əlavə

Gəlin indi obyektlər 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 edərək elementlərə müraciət etməliyik.

Gəlin yoxlayaq. Tutaq ki, bizim aşağıdakı obyektlər 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>;
}

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

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