<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />
    <script data-require="react@*" data-semver="0.14.2" src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body class="container">
    
    <div id="example" class=""></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="script.js"></script>
  </body>

</html>
// Code goes here
var Domanda = React.createClass({
  

  render: function() {
    return ( < h1 >
      quanto fa 1 + 1 < /h1>

    )
  }
});

var Risposta = React.createClass({
  propTypes: {
    val: React.PropTypes.number
  },
  whenClick: function() {
    this.props.handler(this.props.val);
  },
  render: function() {
    return ( 
      <button  onClick = {this.whenClick}> {this.props.val} </button>
    )
  }
});

var Content = React.createClass({
  getInitialState: function() {
    return {
      risposta: ''
    }
  },
  
  setRisposta: function(r) {
    this.setState({
      risposta: r
    });
  },

  
  whenClick: function(e) {

    //questa era un'altra soluzione per accedere alla risposta 
    // ma non è eleante
    this.setState({
      risposta: $(e.target).data('val')
    });
  },

  render: function() {

    return ( <div>
      <Domanda />
      <Risposta val={"2"} handler = {this.setRisposta}/>  
      &nbsp; - &nbsp; 
      <Risposta val={3} handler = {this.setRisposta}/>
      <br/><br/>
      la tua risposta è: {this.state.risposta} </div>


    )
  }

});

React.render( < Content / > ,
  document.getElementById('example')
);
/* Styles go here */