import React, { Component } from 'react';
import classnames from 'classnames';

class Filter extends Component {

  static propTypes = {
    title: React.PropTypes.string.isRequired,
    onChange: React.PropTypes.func.isRequired,
    active: React.PropTypes.bool,
  };

  static defaultProps = {
    active: false,
  };

  constructor(props) {
    super(props);

    const { active } = this.props;

    this.state = {
      active,
    };
  }

  onFilterChange = () => {
    const { onChange } = this.props;
    const { active } = this.state;

    const nextActive = !active;

    this.setState({ active: nextActive });

    onChange(nextActive);
  }

  render() {
    const { title } = this.props;
    const { active } = this.state;

    return (
      <div className={classnames('ui-filter')} onClick={this.onFilterChange}>
        <input
          type="checkbox"
          checked={active}
        /> {title}
      </div>
    );
  }
}

export default Filter;

import React, { Component } from 'react';
import classnames from 'classnames';

class Filter extends Component {
  constructor(props) {
    super(props);

    this.state = {
      active: false,
    };
  }

  render() {
    return (
      <div
        className={classnames('ui-filter')}
        onClick={() => {
          this.setState({
            active: !this.state.active,
          }, () => this.props.onChange(this.state.active));
        }}
      >
        <input
          type="checkbox"
          checked={this.state.active}
        /> {this.props.title}
      </div>
    );
  }
}

Filter.propTypes = {
  title: React.PropTypes.string.isRequired,
  onChange: React.PropTypes.func.isRequired,
};

export default Filter;

--- 
+++ 
@@ -2,51 +2,36 @@
 import classnames from 'classnames';
 
 class Filter extends Component {
-
-  static propTypes = {
-    title: React.PropTypes.string.isRequired,
-    onChange: React.PropTypes.func.isRequired,
-    active: React.PropTypes.bool,
-  };
-
-  static defaultProps = {
-    active: false,
-  };
-
   constructor(props) {
     super(props);
 
-    const { active } = this.props;
-
     this.state = {
-      active,
+      active: false,
     };
   }
 
-  onFilterChange = () => {
-    const { onChange } = this.props;
-    const { active } = this.state;
-
-    const nextActive = !active;
-
-    this.setState({ active: nextActive });
-
-    onChange(nextActive);
-  }
-
   render() {
-    const { title } = this.props;
-    const { active } = this.state;
-
     return (
-      <div className={classnames('ui-filter')} onClick={this.onFilterChange}>
+      <div
+        className={classnames('ui-filter')}
+        onClick={() => {
+          this.setState({
+            active: !this.state.active,
+          }, () => this.props.onChange(this.state.active));
+        }}
+      >
         <input
           type="checkbox"
-          checked={active}
-        /> {title}
+          checked={this.state.active}
+        /> {this.props.title}
       </div>
     );
   }
 }
 
+Filter.propTypes = {
+  title: React.PropTypes.string.isRequired,
+  onChange: React.PropTypes.func.isRequired,
+};
+
 export default Filter;
Introduce an active prop for filters
