Filter Data on Property Values in React

React15 - 16

Share this video with your friends

We want to be able to show only items in a certain status so in this lesson, we’ll add a flag to indicate which items to show, and create a function to filter the todos based on that value. We’ll take advantage of route based state to control the filtering behavior.

Matt

~ 8 years ago

As an alternative to a switch statement what do you feel about using an array to hold the filters something like this

const todoFilters = [
    { key: '/', fn: (item) => item },
    { key: '/active', fn: (item) => item.isComplete === false},
    { key: '/complete', fn: (item) => item.isComplete === true}
];

export const filter = (list, filter) => {
    let todoFilter = todoFilters.find((item) => item.key === filter);
    return list.filter(todoFilter.fn);
}

Andy Van Slaars(instructor)

~ 8 years ago

Matt,

I like that!

You might even take it one step further and create an generic identity function from the function you've defined for the / key. And you could shorten the other two if you like. Something like this:

const identity = x => x
const todoFilters = [
    { key: '/', fn: identity },
    { key: '/active', fn: (item) => !item.isComplete},
    { key: '/complete', fn: (item) => item.isComplete}
];

export const filter = (list, filter) => {
    let todoFilter = todoFilters.find((item) => item.key === filter);
    return list.filter(todoFilter.fn);
}

Matt

~ 8 years ago

Nice, even better.!!

Iain Maitland

~ 8 years ago

Where in my react chrome plugin can I examine the available context, would be nice to find where:

  static contextTypes = {
    route: React.PropTypes.string
  }

Is coming from...

Andy Van Slaars(instructor)

~ 8 years ago

Iain,

If you select a component that has access to context, like App or one of the Link components, you should see context in the right pane where you would expect to find state or props

Kartikey Tanna

~ 7 years ago

Had the problem but solved it. So removed the content