Как сделать контролируемые инпуты с вложенными объектами в state?

Question

[Sanchik97]

Добрый день! В state хранится объект, внутри которого есть ещё один объект:

spoiler

name: '',
 title: '',
	fr: {
		name: '',
                title: ''
	},
	en: {
		name: '',
                title: ''
	}
}

Как повесить на input событие onChange, чтобы при этом он менял значение ключа name или title внутри, к примеру, объекта en

Answer 1

[0xD34F]

onChange = ({ target: { value, dataset: { objName, key } } }) => {
  this.setState(({ [objName]: obj }) => ({
    [objName]: {
      ...obj,
      [key]: value,
    },
  }));
}

<input
  data-obj-name="fr"
  data-key="name"
  value={this.state.fr.name}
  onChange={this.onChange}
/>
<input
  data-obj-name="en"
  data-key="title"
  value={this.state.en.title}
  onChange={this.onChange}
/>

Comments

[Sanchik97]

Спасибо большое!