Как записать состояния в объект?

Question

[zlodiak]

Состояние формы логина контролируется при помощи хука useState. На каждое поле формы повешен обработчик onChange. После ввода пользователя соответствующие значения записываются в объект состояния:

import React, { useState } from 'react';

function Auth(props) {
  const [form, setForm] = useState([{
    login: '',
    password: '',
  }]);

  return (
    <>
      <div className="login-form">
        <input type="text" onChange={ e => { setForm({ login: e.currentTarget.value }) } }/>
        <br/>
        <input type="text" onChange={ e => { setForm({ password: e.currentTarget.value }) } }/>
        <br/>
        <button>auth</button>
        { form.login }--
        { form.password }
      </div>
    </>
  );
}

export default Auth;

Проблема в том, что после заполнения поля login в стейте пропадают значения password. И при заполнеии поля password в стейте пропадают значения login. Это видно на экране:

{ form.login }--
{ form.password }

Помогите пожалуйста сделать так чтобы в стейте независимо сохранялись значения обоих полей.

Есть вариант использовать два хука useState, но мне нужен именно один

Answer 1

[Тигран Абрамян]

<input type="text" onChange={e => setForm({ ...form, login: e.target.value })} />
<input type="text" onChange={e => setForm({ ...form, password: e.target.value })} />

Answer 2

[0xD34F]

const [ form, setForm ] = useState({
  login: '',
  password: '',
});

const onChange = ({ target: t }) => setForm({ ...form, [t.name]: t.value });

<input name="login" value={form.login} onChange={onChange} />
<input name="password" value={form.password} onChange={onChange} />

Answer 3

[Kirill Makarov]

Да все верно, ты перезатираешь стэйт, поэтому необходимо использовать спрэд оператор, чтобы сохранять старые значения поля. Как и было указано в ответах выше. От себя могу добавить то что было бы не плохо сразу заюзать библиотеку react-hook-form. Она позволит сократить количество рендеров что хорошо скажется на производительности