TranslationWidget.jsx

export class TranslationWidget extends Component {
  constructor(props, c) {
    super(props, c);

    this.state = {
      items: this.props.value
    };
  }
  onChange(key, value) {
    this.setState({
      items: {
        [key]: value
      }
    });
  }
  render() {
    return (
      <div>
        {Object.entries(this.state.items).map(([key, value], i) => (
          <div key={key}>
            <label for={labelr(key)}>{key}</label>
            <input
              type="text"
              name={labelr(key)}
              value={value}
              onChange={event => this.onChange(key, event.target.value)}
            />
          </div>
        ))}
        <button onClick={() => this.props.onChange(this.state.items)}>
          Save Changes
        </button>
      </div>
    );
  }
}