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:
jsxconst 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:
jsxfunction 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>;
}
Задание 1
Bir düymə hazırlayın, kliklədikdə
massivin sonuna yeni element
əlavə etsin, beləliklə ul
teqinin sonuna yeni bir li əlavə olunsun.
Задание 2
Üç 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.