React-Bootstrap Dropdown Button does not work as expected

Question

I am not able to make the DropDown button render in the correct way. Please see the jsbin example created. Not able to Understand what i am doing wrong.

JSBin

const Hello = (props) => {
  console.log(props)
  let Media = ReactBootstrap.Media
  let Image = ReactBootstrap.Image
  let DropdownButton = ReactBootstrap.DropdownButton
  let MenuItem = ReactBootstrap.MenuItem
  let ButtonToolbar = ReactBootstrap.ButtonToolbar
  return (
  <div>
  <p>Hi {props.name.title}</p>
    <ButtonToolbar>
    <DropdownButton title = "Test" id = "test" key = "1">
   <MenuItem key = "1" eventKey="1">1</MenuItem>
    </DropdownButton>
    </ButtonToolbar>    
  </div> 
  )
}

class App extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      globus:{
        title:"DropDown Button",
        actors:["h","i","j"]
      }

    };
  }

  render() {
    return (<div className="app">
        <Hello name={this.state.globus} />
      </div>);
  }
}

ReactDOM.render(<App />, document.getElementById('app'));

Any help is much appreciated

Cheers!

Answer 1

You need to include the bootstrap css for react-bootstrap:

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">

JSBin