Реактивное добавление в массив объектов в 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>;
}
Сделайте кнопку, по нажатию на которую
будет добавляться новый элемент
в конец массива, тем самым добавляя новый
li в конец тега ul.
Сделайте три инпута и кнопку. По нажатию
на кнопку из данных инпута создайте новую
li в конце тега ul.