Доступ реквизита внутри фигурной скобки в React JS

Question

Как получить доступ к значению из реквизита props.id внутри контролируемого входа?

Чего я хочу достичь.

<input
  name="lname"
  value={pax.adult1.lname} // This gets/displays input on state change
  onChange={handleChange}
  type="text"
  placeholder="Last name"
  className="form-control"
/>;

Что я пробовал:

<input
  name="lname"
  value={pax.adult`${props.id}`.lname} // This throws an error
  onChange={handleChange}
  type="text"
  placeholder="Last name"
  className="form-control"
/>;

Я также попробовал следующее

value={pax.adult + props.id + `.lname`} // NaN.lname

И

value={`pax.adult${props.id}.lname`} // This displays the right value "pax.adult1.lname" but as a string

Любая помощь будет оценена.

Answer 1

Код между { } просто нормальный JS. Таким образом, чтобы получить доступ к свойству объекта, используя переменную в JS, вы используете квадратные скобки и передаете строку, перечислив так: obj["aString"].

В вашем случае это будет:

pax["adult" + props.id].lname

или, чтобы сделать его лучше выглядящим:

pax[`adult${props.id}`].lname

Answer 2

Попробуй вот так:

<input
  name="lname"
  value={pax[`adult${props.id}`].lname}
  onChange={handleChange}
  type="text"
  placeholder="Last name"
  className="form-control"
/>;