How to add a classname id to React-Bootstrap Component

Question

Suppose we are using Row from React-Bootstrap    How do we style it without using a wrapper or inner element   lt Row gt     lt div className  some-style  gt          lt  Row gt   Ideally  we could just do   lt Row className  some-style  gt          lt  Row gt   But this doesn t work and I d presume it s because React-Bootstrap does not know where the className goes within the  lt Row gt  component  it should just style the  lt div gt  that has the row styles

User · Accepted Answer

If you look at the code for the component you can see that it uses the className prop passed to it to combine with the row class to get the resulting set of classes   lt Row className  aaa bbb     works  Also  if you provide the id prop like  lt Row id  444      it will actually set the id attribute for the element

User · Answer

1st way is to use props   lt Row id    someRandomID  gt    Wherein  in the Definition  you may just go   const Row   props    gt     div id    props id      The same could be done with class  replacing id with className in the above example     You might as well use react-html-id  that is an npm package  This is an npm package that allows you to use unique html IDs for components without any dependencies on other libraries   Ref  react-html-id    Peace

[reactjs] How to add a classname/id to React-Bootstrap Component?

Examples related to reactjs

Examples related to jsx

Examples related to react-bootstrap