title: Counting values of select inputs in ReactJS
body: <p>I'm having trouble figuring out/conceptualizing how to create a component in ReactJS. I threw together a little example where I have a top component of a meal plan, then I have another component which gets used for each meal in the plan. </p>
  
  <p>Now, I want a component that displays the count of the number of times a user has selected a meal category. I've whipped up a little example here. <a href="http://jsbin.com/vuxuze/edit?js,output" rel="nofollow">Meal Plan Example</a></p>
  
  <p>So using the example, I want a component that summarizes how many fruits and vegetables the user has currently selected. My old way of thinking was that I would need to change a count somewhere on a category change, but I think in react this should be different and easier right? It feels like maybe I should just be (somehow?) grabbing the values of the category select boxes and counting them and rendering that out in the new component. It feels like maybe I should be looking at the ref docs, but they use a pretty simple example. </p>
  
  <p>Not really sure what the right way to go about this is. </p>
  
  <p>Here's the code as well.</p>
  
  <p><strong>JSON</strong></p>
  
  <pre><code>var plan = { 
      "meals": [
        {
          "selectedFood":"",
          "mealName":"breakfast"
        },
        {
          "selectedFood":"",
          "mealName":"lunch"
        },
        {      
          "selectedFood":"",
          "mealName":"dinner"
        },
      ],
      "planOptions": [
        {
          "id":1,
          "category":"fruit",
          "food":"apple"
        },
        {
          "id":2,
          "category":"fruit",
          "food":"pear"
        },
        {
          "id":3,
          "category":"vegetable",
          "food":"carrot"
        },
        {
          "id":4,
          "category":"vegetable",
          "food":"corn"
        }
      ]
  };
  </code></pre>
  
  <p><strong>JSX</strong></p>
  
  <pre><code>var PlanEntryBox = React.createClass({
      getInitialState: function() {
          return {
              plan: {}
          };
      },
      render: function() {
      var planOpts = this.props.plan.planOptions;
      var meals = this.props.plan.meals.map(function(meal) {
              return (
                  &lt;MealEntryBox mealEntry={meal} planOptions={planOpts} /&gt;
              );
          });
          return (
          &lt;div&gt;
              &lt;h1&gt;Meals&lt;/h1&gt;
                  &lt;table className="table"&gt;
             &lt;thead&gt;
               &lt;tr&gt;
                 &lt;th&gt;Meal&lt;/th&gt;
                 &lt;th&gt;Category&lt;/th&gt;
                 &lt;th&gt;Food&lt;/th&gt;
               &lt;/tr&gt;
             &lt;/thead&gt;
             &lt;tbody&gt;
               {meals}
             &lt;/tbody&gt;
           &lt;/table&gt;
           &lt;CategoryCounter /&gt;
         &lt;/div&gt;
          );
      }
  });
  
  var MealEntryBox = React.createClass({
      getInitialState: function() {
          return {
              selectedCategory: null
          };
      },
      categoryChange: function(event) {
          this.setState({selectedCategory: event.target.value});
      },
      render: function() {
          var options = _.uniq(_.pluck(this.props.planOptions, 'category'));
          var categoryOpts = options.map( function(category) {
              return (
                  &lt;option&gt;{category}&lt;/option&gt;
              );
          });
  
      var filteredOptions = _.filter(this.props.planOptions, {"category": this.state.selectedCategory});
          var foodOpts = filteredOptions.map( function(option) {
              return (
                  &lt;option&gt;{option.food}&lt;/option&gt;
              );
          });
          return (
       &lt;tr&gt;
               &lt;td&gt;{this.props.mealEntry.mealName}&lt;/td&gt;
         &lt;td&gt;
               &lt;select className="form-control" onChange={this.categoryChange}&gt;
                   &lt;option&gt;Pick one... &lt;/option&gt;
           {categoryOpts}
               &lt;/select&gt;
         &lt;/td&gt;
  
         &lt;td&gt;
               &lt;select className="form-control" disabled={!this.state.selectedCategory}&gt;
           {foodOpts}
               &lt;/select&gt;
         &lt;/td&gt;
       &lt;/tr&gt;
          );
      }
  });
  
  
  var CategoryCounter = React.createClass({
    render: function() {
      return(
        &lt;div&gt;
          &lt;h3&gt;Counts&lt;/h3&gt;
        &lt;/div&gt;
      );
    }
  });
  
  React.render(
      &lt;PlanEntryBox plan={plan} /&gt;,
      document.getElementById('content')
  );
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="https://cdn.rawgit.com/lodash/lodash/3.0.1/lodash.min.js"&gt;&lt;/script&gt;
  &lt;script src="//fb.me/react-0.13.1.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/jquery.min.js"&gt;&lt;/script&gt;
  &lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" type="text/css" /&gt;
  &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;Meal Plan Example&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
    &lt;div id="content"&gt;
  
    &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>