index.js

import React, {Component} from 'react';
import classNames from 'classnames';
import FilterItem from './item';

class Filter extends Component {

  state = {
    isOpen: false,
    isApply: false,
    categories: [
      'JavaScript',
      'Web Development',
      'PHP',
      'Front-End',
      'Web Apps',
      'Back-End',
    ],
    checked: new Set()
  }

  handleChange = (e) => {
    const checked =  new Set(this.state.checked);
    if (checked.has(e.target.value)) {
      checked.delete(e.target.value);
    } else {
      checked.add(e.target.value);
    }
    this.setState({ isApply: true, checked: checked });
  }

  handleApplyClick = e => {
    e.preventDefault();
    this.setState({ isApply: false });
  }

  handleUncheckedClick = (e) => {
    e.preventDefault();
    this.setState({ checked: new Set() });
  }

  render() {
    const categoriesInputsClasses = classNames('categories-inputs', {
      active: this.state.isOpen
    });
    const filtersApplyClasses = classNames('filters-apply', {
      show: this.state.isApply
    });

    const items = this.state.categories.map((category, i) => <FilterItem key={i} title={category} isCheked={this.state.checked.has(category)} onChange={this.handleChange} />);

    return (
      <div className="filters-inner">
        <div className="filters">
          <div className="filters-close-wrapper">
            <a href="#" className="filters-close"></a>
          </div>
          <h3 className="categories-title">Categories</h3>
          <ul className={categoriesInputsClasses}>
            {items}
          </ul>
          <div className="uncheck-inputs">
            <span className="uncheck-icon" onClick={this.handleUncheckedClick}>X</span>
            <a href="#" className="uncheck-text" onClick={this.handleUncheckedClick}>Uncheck All</a>
          </div>
          <div className="more-categories" onClick={e => this.setState({isOpen: !this.state.isOpen})}></div>
        </div>
        <a href="#" className={filtersApplyClasses} onClick={this.handleApplyClick}>Apply</a>
      </div>
    );
  }
}

export default Filter;