Delete List Delete List Delete List

React BootStrap SplitButton

2.8k Views Asked by At

I have a snippet from a ReactComponent as follows:

<SplitButton bsStyle="info" bsSize="large" title="Main List">
    <MenuItem eventKey="1">Delete List</MenuItem>
    <MenuItem eventKey="2">Edit List Name</MenuItem>
</SplitButton>

I want to add a link to the "Main List" button, but currently I am still moving to that link on clicking the dropdown button of the <SplitButton> instead of the "Main List" title.

Where should I put the href tag to follow the link only when clicking the "Main List" button?

1

There are 1 best solutions below

0
Chris On BEST ANSWER

Just add the href attribute to your <SplitButton>, like this:

<SplitButton href="http://google.com" bsStyle="info" bsSize="large" title="Main List" >
  <MenuItem eventKey="1">Delete List</MenuItem>
  <MenuItem eventKey="2">Edit List Name</MenuItem>
</SplitButton>

Demo

There's a list of all properties for this particular component, here