How to add custom data-* attributes in react-bootstrap component

Question

I am using react-bootstrap for 'atom' level components in my react app and I want to pass HTML5 data-* attributes to those component and even though I do pass them in my react-bootstrap component ( Button in my case) they do not show up and when I inspect them and hence I am not able to use them

Now Is there a way to do that? I have went through their documentation but there is no clue as to how to do that?

Answer 1

DOM attributes that use data-* will not be altered in React.

There are stricter rules around non-data attributes as of React 16, but as you can read here , the data-attributes are left in.

With React Bootstrap, certain elements have had issues receiving data-attributes, if they map to say a list of

items. If you show your JSX it might make diagnosing easier.