Submitted over 1 year ago
Job Listing w/ Filtering (ReactJS + Vite + Tailwind + HTML)
#react#tailwind-css#vite#accessibility
@reymartvigo
Design comparison
SolutionDesign
Solution retrospective
Hi this is my solution to Job Listing w/ Filtering.
Feel free to give feedbacks and suggestions on how I can improve are very welcome!
Community feedback
- @fazzaamiarsoPosted over 1 year ago
Hi ! Nice Solution!
I have some quick tips for you
- For deleting item, you can use
.filter
to avoid array mutation.
const handleDeleteItem = (itemToDelete) => { const updatedItems = selectedItems.filter(item => item !== itemToDelete) setSelectedItems(updatedItems); setFilterVisible(updatedItems.length !== 0) }
- You can utilize spread operator to pass props to a component if the props is the same as the object. Example
// instead of this <Jobs key={job.id} id={job.id} company={job.company} logo={job.logo} new={job.new} featured={job.featured} position={job.position} role={job.role} level={job.level} postedAt={job.postedAt} contract={job.contract} location={job.location} languages={job.languages} tools={job.tools} openFiltered={handleOpenFilter} // more concise, with the tradeoff of must lookup `job` to know what you passing <Jobs key={job.id} {...job} openFiltered={handleOpenFilter} />
I hope it helps! Cheers!
Marked as helpful0 - For deleting item, you can use
Please log in to post a comment
Log in with GitHubJoin 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