По сравнению с простым добавлением элемента массива, при добавлении объекта необходимо задать одновременно все его свойства. Для этого потребуется сделать в примере поля input для ввода данных каждого свойства. При этом логику приложения можно организовать двумя способами по способу обработки вводимой информации:
- Сделать отдельный стейт для каждого поля input.
- Сделать один объект, который будет содержать значения всех полей input.
function getEmptyObj() {
return const emptyObj = {
id: id(), // генерируем уникальный id
prop1: '',
prop2: '',
prop3: ''
};
}
const mouseText = [
{
id: 'tl2zI5J3IbLwukybTEsIxXXb6',
prop1: 'Тише',
prop2: 'мыши',
prop3: 'кот на крыше',
},
{
id: 'ViWgVtvU2qRo6huLg18DdYuio',
prop1: 'А котята',
prop2: 'ещё',
prop3: 'выше',
},
];
import React, { useState } from 'react';
function App() {
const [objArr, setValue] = useState(mouseText);
const [obj, setObj] = useState(mouseText);
function add() {
setValue([...objArr, obj]); // добавление объекта к массиву
setObj(getEmptyObj()); // сохранение пустого объекта в стейт
}
function change(prop, event) { // изменение свойства при вводе
setObj({...obj, [prop]: event.target.value});
}
const result = objArr.map((obj) => { // вывод сохранённого массива объектов
return <p key={obj.id}>
{obj.prop1}
{obj.prop2}
{obj.prop3}
</p>;
});
return <div>
{result}
<br />
<input value={obj.prop1} onChange={event => change('prop1', event)} />
<input value={obj.prop2} onChange={event => change('prop2', event)} />
<input value={obj.prop3} onChange={event => change('prop3', event)} />
<br />
<button onClick={add}>Добавить объект</button>
</div>;
}
export default App;
При выполнении такого кода на странице браузера появится все свойства объектов, находящиеся в массиве: "Тише мыши кот на крыше А котята ещё выше". Под ними будет три поля для вода новых трёх свойств. Для добавления объекта нужно заполнить эти три свойства и кликнуть на кнопку ниже "Добавить объект".