index.js

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

export default class Filter extends Component {

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

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

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

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

    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}>
            {
              this.state.categories.map((category, i) => (
                <FilterItem
                  key={i}
                  title={category}
                  isCheked={this.state.checked.has(category)}
                  onChange={this.handleChange} />
              ))
            }
            {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="filters-apply" onClick={this.handleAppliedClick}>Apply</a>
      </div>
    );
  }
}