Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

job listing with filter function using React

Paola 320

@paolas771

Desktop design screenshot for the Job listings with filtering coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


This project was very educational for me. I learned a lot. Removing filters was a real challenge for me so if anyone knows of a better way to do it, please let me know. Also I want to get better at writing the README so if you can look at mine and suggest any improvements I would appreciate it.

Community feedback

Tom 290

@tomhine

Posted

Hi Paola, this solution looks really good. Well done!

You'll probably want to add some conditional styles for the green left hand border as they should only be coloured on the featured jobs.

The filtering is definitely tricky, I've put together a simple demo of how I would do it and pushed it to github if you'd like to look at it.

The basic gist is that only the filters that are active need to be tracked in useState as the filtered jobs can be built from those active filters and the original jobs. I would put the active filters in a array in useState as this makes it easy to add and remove them.

The array.filter method returns the new filtered array leaving the original array untouched, so you don't have to keep the original in state as this never has to change.

I hope this helps, definitely try cloning that example repo and mess around with it!

Marked as helpful

0

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord