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

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

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 :)

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

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!