Как получить доступ к объектам внутри Array в React

Question

const [new, setNew] = useState(
    {
        "student":
            [
                {
                    name:"",
                    age: ""
                }
            ]
    }
);

Как я устанавливаю объект состояния внутри массива, и я хочу передать свой вход в этот массив, я использую реагирующие хуки.

Ниже одна из них - функция изменения дескриптора:

const handleChange = (event) => {
        //my text editor output
        const data = event.target.getContent();
        setNew({ ...new.student, summary: data });
        console.log(event);
    };

Answer 1

const App = () => {
  const [objectArray, setObjectArray] = React.useState({
    students: [
      {
        name: "",
        age: ""
      },
      {
        name: "",
        age: ""
      },
      {
        name: "",
        age: ""
      }
    ]
  });

  const handleChange = (index, name, value) => {
    console.log("changed - ", index, name, value);
    const updated = {...objectArray};
    updated.students[index][name] = value;
    setObjectArray(updated);
  };

  return (
    <div className="container">
      <div className="row row-cols-2">
        <div className="col">
          {objectArray.students.map((s, i) => (
            <div className="form-group">
              <div className="input-group mb-3">
                <div className="input-group-prepend">
                  <span className="input-group-text" id="basic">
                    Name
                  </span>
                </div>
                <input
                  type="text"
                  className="form-control"
                  value={s.name}
                  onChange={e => handleChange(i, "name", e.target.value)}
                  placeholder="Name"
                  aria-label="Name"
                  aria-describedby="basic"
                />
              </div>
              <div className="input-group mb-3">
                <div className="input-group-prepend">
                  <span className="input-group-text" id="basic">
                    Age
                  </span>
                </div>
                <input
                  type="text"
                  className="form-control"
                  value={s.age}
                  onChange={e => handleChange(i, "age", e.target.value)}
                  placeholder="Age"
                  aria-label="Age"
                  aria-describedby="basic"
                />
              </div>
            </div>
          ))}
        </div>
        <div className="col">{JSON.stringify(objectArray, null, 2)}</div>
      </div>
    </div>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.7.0-alpha.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.7.0-alpha.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 2

setNew({student: [ ...new.student, {summary: data }]});

Хотите сделать что-то вроде этого?