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?

@Nenotlep: Well Not really! The extra information I wanted to keep in custom attribute I appended it in id attribute. — HVenom
– HVenom, Commented Jan 29, 2019 at 16:04
@HVenom, which version of react-bootstrap do you use. As I see in the latest code they do pass the rest props to the component and hence it would work for most components — Shubham Khatri
– Shubham Khatri, Commented Jan 30, 2019 at 6:07
@ShubhamKhatri Well! This is weird at the time I posted this question I was using (0.32.0) and was having an issue with passing data-attributes to the button. today I tried the same thing and it works like a charm codesandbox.io/s/7m34vvljjq — HVenom
– HVenom, Commented Jan 30, 2019 at 16:14
Yeah, I found that now too. Maybe accept adamnrights's answer or @ShubhamKhatri should add their own answer? — Joel Peltonen
– Joel Peltonen, Commented Jan 30, 2019 at 16:21

adamrights · Accepted Answer · 2019-01-30 06:07:09Z

5

+50

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.

answered Jan 30, 2019 at 6:07

adamrights

1,7311 gold badge12 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joel Peltonen Over a year ago

Oh,this is actually true. It'd be cool if you add an example of JSX and rendered HTML here, but +1 this works.

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related