Как отправить данные с 2 входов в один объект сервера json?

Question

Я пытаюсь создать простую систему входа в систему с использованием реакции и JSON-сервера (на локальный порт). У меня есть 2 входа, один для имени, другой для пароля. Моя проблема в том, что когда я пытаюсь отправить эти входные данные, на стороне сервера появляются имя и пароль со значениями из пароля.

class AddAcc extends Component {
  constructor(props) {
    super(props);
    this.input = null;
    this.pushAcc = this.pushAcc.bind(this)
  }

  async pushAcc() {
    try {
      await Axios
        .post(
          `${BASE_URL}users`,
          {
            name: this.input.value,
            password: this.input.value,
          },
          {
            'Content-Type': 'aplication/json'
          }
        )
      this.props.newAcc(this.input.value);
    } catch(e) {
    }
  }
render() {
  return(
    <div>
      <p>
        <input
          ref={name => this.input = name} />
      </p>
      <div>
        <h3>Enter Password</h3>
      </div>
      <p>
        <input
          ref={pass => this.input = pass} />
      </p>
      <button onClick = {this.pushAcc} type="submit"> SUBMIT </button>
    </div>
  )
}
}

export default AddAcc;

Answer 1

Это просто потому, что вы используете одно и то же имя для имени и пароля. Это простое решение:

<input ref={name => this.inputName = name} />
<input ref={pass => this.inputPass = pass} />

Тогда сделай это,

await Axios
    .post(
      `${BASE_URL}users`,
      {
        name: this.inputName.value,
        password: this.inputPass.value,
      },
      {
        'Content-Type': 'aplication/json'
      }
    )

Answer 2

Поскольку вы используете один и тот же ref this.input для имени и пароля.

Сменить пароль

<input ref={pass => this.passwordInput = pass} />