<commit_before>/**
 * Step 3: add interactivity with state
 */

let CardView = React.createClass({
  getInitialState: function() {
    return {
      front: true
    };
  },

  flip: function() {
    this.setState({
      front: !this.state.front
    });
  },

  render: function() {
    let text;
    if (this.state.front) {
      text = this.props.card.question;
    } else {
      text = this.props.card.answer;
    }
    return (
      <div>
        <p>{text}</p>

        <button onClick={this.flip}>
          Flip
        </button>
      </div>
    );
  }
});

let App = React.createClass({
  getInitialState: function() {
    return {
      activeIndex: 0
    }
  },

  setActiveIndex: function(newIndex) {
    this.setState({
      activeIndex: newIndex
    });
  },

  render: function() {
    let activeCard = this.props.cards[this.state.activeIndex];
    return (
        <div>
      <CardView card={activeCard}/>
      <button onClick={this.nextCard}
      </div>
    );
  }
});

let cards = [
  {
    question: "What is the ultimate answer to life, the universe, and everything?",
    answer: "42"
  }, {
    question: "When was Harvard founded?",
    answer: "1636"
  }
];

React.render(<App cards={cards}/>, document.getElementById('page'));<commit_msg>Start step 5<commit_after>/**
 * Step 5: communication between components
 * TODO
 */
{'fraction_non_alphanumeric': 0.15214180206794684, 'fraction_numerical': 0.007385524372230428, 'mean_word_length': 2.2968369829683697, 'pattern_counts': {'":': 0, '<': 14, '<?xml version=': 0, '>': 13, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3167350', 'n_tokens_mistral': 448, 'n_tokens_neox': 434, 'n_words': 98}