Selected button in list

ES6 ReactJS

by Sparrow Squire

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<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://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="buttonExample"></div>

CSS

button {
  display:block;
  color: #fff;
  font-family: sans-serif;
  font-size: 16px;
  text-shadow: 0 0 3px #FA6900;
  text-decoration: none;
  background: #F38630;
  border: 1px solid #FA6900;
  padding: 5px 10px;
  margin: 0 auto 10px;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}

button:hover {
  background: #FA6900;
}

button.active {
  background: #0091fa;
  border: 1px solid #0082e1
}

JavaScript 1.7

var buttonItems =  [...Array(13).keys()];

class ButtonComponent extends React.Component {
   
    constructor(props) {
        super(props);
        this.state = {
            selectedButtonId: null
        };
    }

    handleClick(e) {
      this.setState({ selectedButtonId: e.target.value });
      //this.setState({ selectedButtonId: $(e.target).attr('data-index') });
    }

    render(){
    	
      
      var buttons = buttonItems.map(function(obj, index) {
      		return <button key= { obj } 
          							 value= { obj }
                         //data-index= { index }
                         //className= { this.state.selectedButtonId == index ? 'active' : '' }
                         className= { this.state.selectedButtonId == obj ? 'active' : '' }
                         onClick= { this.handleClick.bind(this) }>I am button #{ index }</button>;
      }.bind(this));
            
      return (
        <div>{ buttons }</div>
      );
    }
}


ReactDOM.render(
  <ButtonComponent />,
  document.getElementById('buttonExample')
);