<div className="filters">
                        {Object.keys(FILTERS).map(key =>
                            <FilterItem key={key}
                                filter={FILTERS[key]}
                                currentFilter={currentFilter}
                                handleSetFilter={this.handleSetFilter} />
                        )}
                    </div>


const FilterItem = (props) => {
    const {
        filter,
        currentFilter,
    } = props
    const isFilter = (selectedFilter) => selectedFilter === currentFilter
    const getActiveClass = (selectedFilter) => isFilter(selectedFilter) ? ' active' : ''

    return (
        <div className={`filter cursor-pointer ${getActiveClass(filter)}`} onClick={() => props.handleSetFilter(filter)}>
            {!isFilter(filter) ? <i class="far fa-circle"></i> : null}
            {isFilter(filter) ? <i class="far fa-check-circle"></i> : null}
            {filter}
        </div>
    )
}