Skip to content
Submitted over 3 years ago

Solution using react

react, tailwind-css
abhikr4545•280
@abhikr4545
A solution to the Job listings with filtering challenge
Preview (opens in new tab)Code (opens in new tab)

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

Code

Please log in to post a comment

Log in

Community feedback

  • Michael Bishop•1,080
    @MikeBish13

    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

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