Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!doctype html>
<html>
  <head>
<meta name="description" content="React test React-Bootstrap">
    <meta charset="utf-8" />
    <title>React App!</title>
    
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
​
    <script src="https://npmcdn.com/react@latest/dist/react-with-addons.js"></script>
    <script src="https://npmcdn.com/react-dom@latest/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.15.0/babel.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.30.7/react-bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.5/css/bootstrap-flex.min.css"></script>    
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>
 
​
div.title {
  margin: 20px auto;
  text-align: center;
  width: 200px;
  font-size: 20px;
}
​
​
 
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'));
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers