title: How do I go about making this part of my code reactive? (Meteor + React)
body: <p>Basically, I want to make my page reactive and give results based on user's input/choices.</p>
  
  <p>I pass user's choices from parent to child component via props (dictionary is an object with user's choices and amount of choices per key (ex: <code>dictionary = {Gallileo: 2, Juno: 1, Mars: 1}</code>):</p>
  
  <pre><code>&lt;Childcomp aggregate={this.props.dictionary}/&gt;
  </code></pre>
  
  <p>On the child component, I do a simple loop and the choice and number of votes into a state variable via <code>componentWillMount()</code> method:</p>
  
  <pre><code>  componentWillMount(){
      let obj = this.props.aggregate // {Gallileo: 2, Juno: 1, Mars: 1}
      let choice;
      for(let key in obj){
        if(key === this.props.option){
          choice = obj[key];
          break;
        }
      };
  
      let total = 0;
      for(let key in obj){
        total += obj[key];
      }
  
    this.setState({choice: choice, total: total});
  
  };
  </code></pre>
  
  <p>The problem I have with this is that the state variable does not change the value when input is received. <code>this.props.aggregate</code> does change reactively, but everything after that doesn't respond.</p>
  
  <p>I tried using Session variables to make it reactive, I tried to place the code in <code>Tracker.autorun()</code>, but I have no luck.</p>
  
  <p>The for loop on the object doesn't trigger at all, it seems, which explains why the state variable is never updated even though the this.props.aggregate prop updates seamlessly.</p>