<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>
)
}
Comments