How to access data attributes in React?

Question

React

I 'm trying to
bind
date attributes to a
custom component, throwing them inside this component how to bind your attributes to the component in order to reach them through event.target ?
I do this to avoid such event handlers
https://stackblitz.com/edit/react-khcwbu?file=index.js

Answer 1

const MyInput = props => {
  const { onChange } = this.props;
  const id = this.props['data-id'];
  const name = this.props['data-name'];
  
  return <input onChange={onChange} data-id={id} data-name={name} />;
};

or:
In handler:

onChange = e => {
  const { id, name } = e.target.dataset;
  // do something with id and name
}