CODEWITHSUNDEEP
reactjsreact-bootstrap
Mr.Noob
Mr.Noob

Reputation: 358

data-target not working -- React-bootstrap

I have a simple sidebar with dropdowns. I want the dropdowns to be toggled on click. I used data-target property for this. But its not working as expected.

<div className="dropdown"> 
    <span className="dropdown-toggle" data-toggle="collapse" data-target="#target">Toggle Dropdown</span>
    <ul id="target" className="collapse">
        <li><a href="#"><i className="fa fa-bar-chart"></i><span className="menuName">Options</span></a></li>
    </ul>
</div>

How do i accomplish this in react js??

Upvotes: 0

Views: 3729

Answers (2)

Vivek Doshi
Vivek Doshi

Reputation: 58593

If you are using react-bootstrap as you mentioned in title and also added the tag, then this is the way you can achieve the drop-down.

<DropdownButton title="Dropdown" id="bg-vertical-dropdown-1">
   <MenuItem eventKey="1">Dropdown link</MenuItem>
   <MenuItem eventKey="2">Dropdown link</MenuItem>
</DropdownButton>

Upvotes: 2

Mario Nikolaus
Mario Nikolaus

Reputation: 2406

Data attributes should work normally. You have error in your syntax because you are using class attribute on all the elements except the first span, instead of className.

Upvotes: 1

Related Questions