title: Two checkboxes checked on one click in React JS
body: <p>I have one component (Fuel) which I use in two other components (Search and SmallFilters) :</p>
  
  <p>Search component is as follows :</p>
  
  <pre><code>class search extends React.Component {
      render() {
          const language = this.props.language.default.portal;
  
          return (
              &lt;div&gt;
                  &lt;div className="searchTitle"&gt;&lt;FontAwesome name="search" className="portalFaIcon"/&gt;  {language.search}&lt;/div&gt;
                  &lt;Fuel language={language} actionFilters={this.props.actionFilters} filters={this.props.filters}/&gt;
              &lt;/div&gt;
          );
      }
  }
  
  function mapStateToProps(state, ownProps){
      return {
          favorites: state.favorites,
          filters: state.filters,
          carsToShow: state.carsToShow
      };
  }
  
  function mapDispatchToProps(dispatch){
      return {
          actionFilters: bindActionCreators(filterActions, dispatch),
          actionCarsToShow: bindActionCreators(actionCarsToShow, dispatch)
      };
  }
  
  export default connect(mapStateToProps, mapDispatchToProps)(search);
  </code></pre>
  
  <p>The SmallFilters is as follows :</p>
  
  <pre><code>render(){
      return (
          &lt;div className="filters noPadding col-xl-8 col-lg-6 col-md-6 col-sm-5 col-xs-12"&gt;
              &lt;ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={500}&gt;
                  &lt;Fuel recap={true} title={_.startCase(_.toLower(filter_names.fuel))} {...this.props}/&gt;
              &lt;/ReactCSSTransitionGroup&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>The Fuel component 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';
  
  export default class fuel extends React.Component {
      constructor(props){
          super(props);
  
          this.state = this.getFilterValues()
      }
  
      emptyValues(){
          return {
              checkboxDiesel: false,
              checkboxBenzine: false
          }
      }
  
      handleFilter(){
          if(this.state.checkboxDiesel || this.state.checkboxBenzine){
              this.props.actionFilters.addFuelFilter(this.state);
          }else{
              this.props.actionFilters.removeFuelFilter();
          }
      }
  
      handleDiesel(event){
          const checkbox = event.target.checked;
          this.setState({checkboxDiesel: checkbox, checkboxBenzine: this.state.checkboxBenzine}, () =&gt; this.handleFilter());
      }
  
      handleBenzine(event){
          const checkbox = event.target.checked;
          this.setState({checkboxBenzine: checkbox, checkboxDiesel: this.state.checkboxDiesel}, () =&gt; this.handleFilter());
      }
  
      deActivate(event) {
          event.preventDefault();
          this.setState(this.emptyValues(), () =&gt; this.handleFilter());
      }
  
      getFilterValues(){
          debugger;
          if(!this.props.filters.some(i =&gt; i.name === filter_names.fuel)){
              return this.emptyValues();
          }
  
          return {
              checkboxDiesel: this.props.filters.filter(f =&gt; f.name === filter_names.fuel).map(i =&gt; i.values.map(v =&gt; v.checkboxDiesel)),
              checkboxBenzine: this.props.filters.filter(f =&gt; f.name === filter_names.fuel).map(i =&gt; i.values.map(v =&gt; v.checkboxBenzine))
          };
  
          /*let values = {};
          this.props.filters.filter(f =&gt; {
              if(f.name == filter_names.fuel){
                  values.checkboxDiesel = f.values[0].checkboxDiesel;
                  values.checkboxBenzine = f.values[0].checkboxBenzine;
              }
          });
          return values;*/
      }
  
      renderSmall() {
          let diesel = this.getFilterValues().checkboxDiesel ? "Diesel" : "";
          let benzine = this.getFilterValues().checkboxBenzine ? "Benzine" : "";
          return (
              &lt;div className="filter"&gt;
                  {this.props.title} &lt;Link to="" onClick={this.deActivate.bind(this)}&gt;&lt;FontAwesome name="times" className="portalFaRedIcon"/&gt;&lt;/Link&gt;
                  &lt;div className="filterValues"&gt;{diesel} {benzine}&lt;/div&gt;
              &lt;/div&gt;
          );
      }
  
      render() {
          const language = this.props.language;
  
          if(this.props.recap) return this.renderSmall();
          console.log(this.props.filters);
  
          return (
              &lt;div&gt;
                  &lt;div className="priceTitle" style={{padding: '5px 0'}}&gt;{language.fuel}&lt;/div&gt;
                  &lt;div className="transmissionValues"&gt;
                      &lt;input type="checkbox" onChange={this.handleDiesel.bind(this)} checked={this.getFilterValues().checkboxDiesel}/&gt; &lt;span&gt;Diesel&lt;/span&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>The problem is, when I click on one of those checkboxes, both are checked. And If I click on the same checkbox both are unchecked. But if I click on the other one nothing happends.</p>
  
  <p>This.props.filters comes from redux store and it's something like this if one of those checkboxes is checked : </p>
  
  <pre><code>[{name: "FUEL", values: [{checkboxDiesel: true, checkboxBenzine: false}]}]
  </code></pre>
  
  <p>Any advice?</p>