react_test.js

/** Estrellas a mostrar **/
const Stars = (props) => {
	const numberOfStars = 1 + Math.floor(Math.random()*9);
  // let stars = [];
  // for(let i = 0; i < numberOfStars; i++){
  // 	stars.push(<i key={i} className="fa fa-star"></i>);
  // }
	return (
  	<div className="col-5">
    	{_.range(numberOfStars).map(i => 
      	<i key={i} className="fa fa-star"></i>
      )}
  	</div>
  )
}

const Button = (props) => {
	return (
  	<div className="col-2">
  	  <button> = </button>
  	</div>
  )
}

/** Respuestas elegidas **/
const Answer = (props) => {
	return (
  	<div className="col-5">
  	  {props.selectedNumbers.map((number,i) => 
      	<span key={i}>{number}</span>
      )}
  	</div>
  )
}

/** Numeros disponibles  **/
const Numbers = (props) => {

  const numberClassName = (number) => {
  	if(props.selectedNumbers.indexOf(number) >= 0){
    	return 'selected';
    }
  }
  
  console.log("props", props);
	return (
  	<div className="card text-center">
  	  <div>
      	{Numbers.list.map((number, i) => 
        	<span key={i} className={numberClassName(number)}
          onClick={() => props.onSelectNumber(number)}>{number}</span>
        )}
  	  </div>
  	</div>
  )
}
Numbers.list = _.range(1,10);

/** Componente de Juego **/
class Game extends React.Component {
  state = {
  	selectedNumbers: []
  };
  
	selectNumber = (numberClicked) => {
  	console.log('numero elegido', numberClicked);
  	this.setState(prevState => {
      return {
      	selectedNumbers: prevState.selectedNumbers.concat(numberClicked)
      }
    });
  };
  
	render() {
  	return (
    	<div className="container">
        <h3>Play Nine</h3>
        <hr />
        <div className="row">
        	<Stars />
        	<Button />
        	<Answer selectedNumbers={this.state.selectedNumbers} />
        </div>
        <br />
        <Numbers selectedNumbers={this.state.selectedNumbers}
        	onSelectNumber={this.selectNumber} />
      </div>
    )
  }
}

/** Componente Principal **/
class App extends React.Component {
	render() {
  	return (
    <div>
    	<Game />
    </div>
    )
  }
}

ReactDOM.render(<App />, mountNode);