Форма добавления в массив объектов в стейтах React

В этой статье будет приведён пример программного кода для добавления объекта в массив с произвольными свойствами, которые задаёт пользователь.

По сравнению с простым добавлением элемента массива, при добавлении объекта необходимо задать одновременно все его свойства. Для этого потребуется сделать в примере поля input для ввода данных каждого свойства. При этом логику приложения можно организовать двумя способами по способу обработки вводимой информации:

• Сделать отдельный стейт для каждого поля input.
• Сделать один объект, который будет содержать значения всех полей input.

Попробуем реализовать второй способ как более универсальный. Для этого сначала создадим объект с несколькими свойствами и передадим его в стейт. Затем сделаем ввод данных в input поля с помощью обработчика события onChange. И в конце создадим кнопку для сохранения изменений. При этом нельзя забывать, что после добавления нужно очистить объект в стейте и что у каждого объекта должен быть свой уникальный id (откуда взять функцию "id" - см. статью Вывод массива объектов в виде таблицы с JSX в React).

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;

При выполнении такого кода на странице браузера появится все свойства объектов, находящиеся в массиве: "Тише мыши кот на крыше А котята ещё выше". Под ними будет три поля для вода новых трёх свойств. Для добавления объекта нужно заполнить эти три свойства и кликнуть на кнопку ниже "Добавить объект".