Как сделать контролируемые инпуты с вложенными объектами в 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]

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