Untitled

            
              /*
 * 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'));