Skip to content
Submitted over 4 years ago

Job listings with filtering (React - CSS makes use of flex gap...)

antoine•345
@antoineterny
A solution to the Job listings with filtering challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

Hi everybody ! This was my first use of React hooks, and I thinks the code is leaner that way. I couldn't find a way of displaying the tablets accordingly to the design without using flex gap, and couldn't find a fallback for navigators which don't support it yet. What do you think about it ?

Code

Please log in to post a comment

Log in

Community feedback

  • antoine•345
    @antoineterny

    Hi VoyageinStyle, I stored each criterion in an array like ["language", "javascript"] So here crit[0] is "language" and crit[1] is "javascript" We want to filter the complete list of jobs in which job["language"] is equal to "javascript" You have to be aware that you can find a property in an object with the key as variable between square brackets. Here, job[crit[0]] is equivalent to job.language Hope it helps ! Cheers

  • VoyageinStyle•0
    @VoyageinStyle

    Hey Antoine,

    Great one!

    I managed to do everything on my own until I got blocked on being able to filter the "tools" and "languages" as they are nested [arrays] themselves.. so I admit I had to see how you did it to figure it out :) I learned how to useEffect in the process !

    There's just one thing though that I can't really understand, in your useEffect() you have a filteredJobs.filter(job => job[crit[0]].includes(crit[1])) towards the end

    I don't understand or know how to read job[crit[0]

    each job that is returned ...

    Merci :)

  • antoine•345
    @antoineterny

    Hi emestabilo, thanks a lot for your feedback! I hadn't noticed this bug, indeed it was not the expected behavior I guess, it is now fixed thanks to you. Oops ! And thank you for these interesting resources but they don't solve the problem since it only occurs when the tablets go "flex-wrapping", and CSS is not aware of who's wrapped and who's not! Hence this super cool gap property which I hope will be supported by every browser very soon (https://www.caniuse.com/?search=flexbox%20gap) Cheers, Antoine

  • Emmilie Estabillo•5,600
    @emestabillo

    Hi Antoine, looks good! Bookmarked for future reference :-) I just noticed that the html, css, and javascript tags are not able to co-exist in the CriteriaBar. Same with ruby, react, and sass. I haven't done this challenge so I'm not sure if this is expected behavior.

    For your gap question, I believe there's a few hacks out there like nth-child (or :not(:nth-child) and the lobotomized owl. Here's a great video resource about the latter.

    Hope this helps!

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