title: Getting checkbox state in React JS
body: <p>My code is as follows :</p>
  
  <pre><code> import React from 'react';
  import FontAwesome from 'react-fontawesome';
  import {Link} from 'react-router';
  import { filter_names } from './filterActions';
  import _ from 'lodash';
  
  export default class fuel extends React.Component {
      constructor(props){
          super(props);
  
          this.state = {
              values: {}
          }
      }
  
  
      handleFuel(name, event){
          let checkbox = event.target.checked;
          let nValues = _.clone(this.state.values);
          nValues.type = name;
          nValues.active = checkbox;
          this.setState({values: nValues});
      }
  
  
  
      render() {
          const language = this.props.language;
  
          return (
              &lt;div&gt;
                  &lt;div className="priceTitle" style={{padding: '5px 0'}}&gt;{language.fuel}&lt;/div&gt;
                  &lt;div className="transmissionValues"&gt;
                      {_.uniq(this.props.allCarsInTheList.map(i =&gt; i.fuel)).map((v, i) =&gt; {
                          return (&lt;div key={i}&gt;&lt;input type="checkbox" onChange={this.handleFuel.bind(this, v)} checked={true}/&gt; &lt;span&gt;{v}&lt;/span&gt;&lt;/div&gt;);
                      })}
                  &lt;/div&gt;
                  {/*&lt;div className="transmissionValues"&gt;
                      &lt;input type="checkbox" onChange={this.handleBenzine.bind(this)} checked={this.getFilterValues().checkboxBenzine}/&gt; &lt;span&gt;Benzine&lt;/span&gt;
                  &lt;/div&gt;*/}
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>I'm mapping through my data and depending on fuel field I'm rendering checkboxes. Thus, I do not want to change the code if my data is changed. But now I have  problem to get check if the checkbox is checked or not. </p>
  
  <p>In handleFuel function I'm adding data to the state, and if checkbox is changed the state (<code>this.state.values</code>) should be something like <code>{type: "Diesel", active: "True"}</code>. </p>
  
  <p>And then in the render I need somehow to get the state active. I tried with something like <code>let checkboxState = Object.keys(this.state.values).length &gt; 0 ? this.state.values.filter(i =&gt; i.type === v).active : false;</code> , but it didn't worked.</p>
  
  <p>Any advice? </p>
  
  <p><strong>UPDATE</strong></p>
  
  <pre><code>let allCarsInTheList = [
      {
          id: 1,
          listID: 3,
          make: "Audi",
          model: "Q5",
          desc: "2.0 CR TDi Comfortline BMT",
          price: 12484,
          mileage: 120021,
          fuel: "Diesel",
          engine: '105/77',
          chassis: "WAUZZZ4G4FN026103"
      }, {
          id: 2,
          listID: 3,
          make: "Audi",
          model: "Q5",
          desc: "2.0 CR TDi Comfortline BMT",
          price: 12484,
          mileage: 120021,
          fuel: "Benzine",
          engine: '105/77',
          chassis: "WAUZZZ4G4FN026103"
      }, {
          id: 3,
          listID: 3,
          make: "Audi",
          model: "Q5",
          desc: "2.0 CR TDi Comfortline BMT",
          price: 12484,
          mileage: 120021,
          fuel: "Diesel",
          engine: '105/77',
          chassis: "WAUZZZ4G4FN026103"
      }, {
          id: 4,
          listID: 3,
          make: "Audi",
          model: "Q5",
          desc: "2.0 CR TDi Comfortline BMT",
          price: 12484,
          mileage: 120021,
          fuel: "Diesel",
          engine: '105/77',
          chassis: "WAUZZZ4G4FN026103"
      }
  ]
  </code></pre>