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

Solution using react

#react#tailwind-css
abhikr4545• 280

@abhikr4545

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


When I click remove on tag the list does get updated instant rather it waits for next render. Any help would be very useful. Thanks

Community feedback

Michael Bishop• 1,070

@MikeBish13

Posted

Great job on the project - looks really good!

In answer to your question - the issue that you have is that you are using jobList for everything and so this keeps getting overwritten with new pieces of filtered data and so you can never return to the initial list of jobs. What you need is a separate array/piece of state for your filtered results. This is how your app currently works:

  1. jobList is populated with data and this loads on the page. All good so far.
  2. 'Frontend' filter is clicked and jobList is filtered accordingly. So your filter is working up to this point.
  3. 'Frontend' filter is unclicked and so your filter removes everything in jobList, which leaves you with an empty array.
  4. Now when you try to display all of your items again using jobList, you're doing so from an empty array and so nothing is displayed.

Hope that helps!

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