Learning Redux

FilterList component

This component works similar to the PostList component. We pass an array of categories, and setFilter and clearFilter action creators. Additionally, we display a link to clear the filter:

1. Create a src/components/FilterList.jsx file, where we map() over all categories:

import React from 'react'
import Filter from './Filter.jsx'

const FilterList = ({ categories, setFilter, clearFilter }) =>
  <span>
    {categories.map(
      (category, i) =>
        <span key={i.toString()}>

2. Then, we use the Filter component, passing the name of the category to it:

          <Filter
            name={category}

3. We also pass an onClick handler to it, which calls the setFilter action creator with the category name:

 onClick={() => setFilter(category)} /> {' - '} </span> )} ...