How to make controlled inputs with nested objects in state?

Question

React

Good afternoon! An object is stored in state, inside of which there is another object:

spoiler

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

How to hang an onChange event on the input so that at the same time it changes the value of the name or title key inside, for example, the en object

Answer 1

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} />