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;

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;

Introduce an active prop for filters
Introduce an active prop for filters
