Filter State Data in Redux with a Selector Function and React Router
Share this video with your friends
In this lesson, we’ll wire up React Router to pass a url based filter parameter into our component and create a selector function to filter our state data between the store and our components by hooking into the ownProps parameter of mapStateToProps.
Great course Andrew,
I am having a problem on this lesson where the application is not recognizing whether task is active or completed. I have validated that checking a box changes the todo in the json-server DB and have made the change from defaultChecked to checked on the checkbox input. However /active shows both items with checkboxes and those without, while completed does not show anything. The strange thing is that in the browser ALL of the list items show the same value for the checkbox <input type="checkbox" value="on">.
I found my error. Thanks again for a great course.
I found my error. Thanks again for a great course.
Sorry I didn't see your original question earlier. Glad you were able to find a solution!
Hey Andrew,
Having nearly completed this excellent, course, I've stumbled on an issue attempting to view all tasks. It appears that accessing http://localhost:3000/ ends up with a stripped trailing slack http://localhost:3000, and thus the path='/:filter' fails. If I change the <Link to='all'> then it works okay.
Any pointers? Cheers
Paul,
Thanks, glad you've enjoyed the course so far. This might be because you are missing the ? on the filter parameter. It's a small difference and easy to miss, but this way, even when filter is undefined it will match the route, and render the component. Without that ?, it won't match the route, and the todo list component isn't rendered.
https://github.com/avanslaars/egghead_react_redux_course/blob/25-filter-todos/src/App.js#L22
Hope this clears it up for you!
Cheers, that worked a treat!