<div id="app"></app>
html, body {
height: 100%;
}
/*
* A simple React component
*/
var arrayOfButtons = ['Button1','r','Butffffffffton3','Button4','Button5','Button6eeeeeeee']
class Application extends React.Component {
constructor(props){
super(props)
this.state={}
}
render() {
return <div>
<ButtonGroup multi arrayOfButtons={arrayOfButtons}/>
</div>;
}
}
class ButtonGroup extends React.Component {
constructor(props){
super(props)
this.state={
whichButton:null
}
}
render() {
var toReturnButtons = this.props.arrayOfButtons.map((button, i) =>{
if(this.state.whichButton === i){
return(
<Button toggled buttonClicked={this._handleButtonClicked.bind(this)} content={button} which={i} key={i}/>
)
}else{
return(
<Button buttonClicked={this._handleButtonClicked.bind(this)} content={button} which={i} key={i}/>
)
}
})
return <div style={{display:'flex'}}>{toReturnButtons}</div>;
}
_handleButtonClicked(whichButton){
console.log(whichButton,"whichButton")
this.setState({
whichButton
})
}
}
class Button extends React.Component {
constructor(props){
super(props)
this.state={}
}
render() {
var btnClassName = `btn btn-danger ${this.props.toggled ? "active " : ' '}`
console.log(btnClassName)
return <button style={{display:'flex',flex:1,borderRadius:0,flexDirection:'row'}} className={btnClassName} onClick={this.props.buttonClicked.bind(this, this.props.which)} type="button"><div style={{margin:'auto'}}>{this.props.content}</div></button>;
}
}
/*
* Render the above component into the div#app
*/
React.render(<Application />, document.getElementById('app'));
Also see: Tab Triggers