Как добавить данные в объект используя usestate в react.js?

@ciara 

Для добавления данных в объект в React.js используйте функцию useState для создания состояния объекта и функцию setObjectState для обновления его значений.

Вот пример:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

import React, { useState } from "react";

function App() {
  const [person, setPerson] = useState({ name: "", age: "" });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setPerson((prevState) => ({
      ...prevState,
      [name]: value
    }));
  };

  return (
    <div>
      <input
        type="text"
        name="name"
        value={person.name}
        onChange={handleChange}
        placeholder="Name"
      />
      <input
        type="text"
        name="age"
        value={person.age}
        onChange={handleChange}
        placeholder="Age"
      />
    </div>
  );
}

export default App;

В примере выше мы создали состояние person, которое является объектом с полями name и age. Затем мы определили функцию handleChange, которая обновляет состояние объекта person при изменении значения полей ввода. Функция setPerson принимает предыдущее состояние объекта и обновляет только измененное поле, используя синтаксис расширения объекта.

В поле ввода мы привязываем значение из состояния объекта и обработчик handleChange, который вызывается при изменении значения поля ввода.

Таким образом, при вводе данных в поля ввода, состояние объекта person будет обновляться автоматически.