Main files for ReactJS components

ReactJS-example-2

## assets/javascripts/components/App.jsx 

var App = React.createClass({

  getInitialState: function() {
    return { data: this.props, messages: [] };
  },

  handleNewAnswer: function(data) {
    var newData = this.state.data;
    newData.messages = data.messages;
    newData.game = data.game;
    newData.card = data.card;
    newData.cards = data.cards;
    this.setState({data: newData});
    return false;
  },

  render: function() {
    var idx = this.state.data.game.card_idx;
    var arr = this.state.data.all_cards;
    var currentCard = arr[idx];
    var table = [];

    var data = this.state.data;

    $.each(data.cards, function(idx, card) {
      table.push(<TableRow card={card} letter={data.letters[idx]} />);
    });
    var messages = [];
    $.each(this.state.messages, function(idx, msg) {
      messages.push(<Message msg={msg}/>)
    });
    var tableTitle = <h2>This spirit animal has the <b>following attribute: </b></h2>;

    return (
      <div className="app-container">
        <GameHeader data={this.state.data }/>
        <div className="col-sm-12 card-wrapper">
          <Card card={currentCard } />
          <div className="col-md-7 table-wrapper">
            { tableTitle }
            <Table table={table} />
            <br /><br />
            <ButtonGroup choice1={data.cards[0]} choice2={data.cards[1]} choice3={data.cards[2]} data={data} sendAnswer={this.handleNewAnswer}/>
          </div>
        </div>
      </div>
    );
  }
});

## assets/javascripts/components/ButtonGroup.jsx
var ButtonGroup = React.createClass({
  handleSubmit: function(e) {
    e.preventDefault();
    var answer = e.target.children[0].value;
    var gameId = this.props.data.game.id;
    var func = this.props.sendAnswer;
    var allCards = this.props.data.all_cards;
    if (answer == allCards[allCards.length - 1].answer) {
      window.location = "/";
    } else {
      $.ajax({
        url: "/games/" + gameId + "/guess",
        method: "post",
        data: {id: gameId, selection: answer},
        dataType: "json",
        success: function(data) {
          func(data);
        }
      });
    }
  },
  render: function() {
    return (
      <div className="button-wrapper">
        <div className="col-sm-3 col-sm-offset-1">
          <form className="" action="/games/{this.state.game.id}/guess" method="post" onSubmit={this.handleSubmit}>
            <input type="hidden" className="selection-input" name="selection" value={this.props.choice1}/>
            <input type="submit" name="name" value="A" className="hero-button"/>
          </form>
        </div>
        <div className="col-sm-3">
          <form className="" action="/games/{this.state.game.id}/guess" method="post" onSubmit={this.handleSubmit}>
            <input type="hidden" className="selection-input" name="selection" value={this.props.choice2} />
            <input type="submit" name="name" value="B" className="hero-button"/>
          </form>
        </div>
        <div className="col-sm-3">
          <form className="" action="/games/{this.state.game.id}/guess" method="post" onSubmit={this.handleSubmit}>
            <input type="hidden" className="selection-input" name="selection" value={this.props.choice3} />
            <input type="submit" name="name" value="C" className="hero-button"/>
          </form>
        </div>
      </div>

    );
  }
});