Filter Data on Property Values in React
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.
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);
}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);
}Nice, even better.!!
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...
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
Had the problem but solved it. So removed the content