All comments

Kelvin Ochubili•510

@IykekelvinsSubmitted over 3 years ago

Feedback required

Static jobs listings with filter using React Js

Jeremy Ludwig•95

@hjludwigPosted over 3 years ago

Hi Kelvin. Thanks for having a look at my solution.

Yours looks good, but (as Chamunorwa said) the filter function doesn't quite work as expected. It should only display jobs that match all the filters whereas yours displays all jobs that match the only last selected filter term.

const filterCategory = (category) => {
    const newCategory = data.filter(
      (item) =>
        item.role === category ||
        item.level === category ||
        item.languages.includes(category) ||
        item.tools.includes(category)
    );

    if (categories.includes(category)) {
      return null;
    } else {
      const newItem = { id: new Date().getTime().toString(), title: category };
      setCategories([...categories, newItem]);
    }
    setJobs(newCategory);
  };

I discovered I could use the .every() method to make sure the filter function only returned those jobs that matched all the filter terms:

const filterJobs = terms => {
        if (terms.length === 0) {
            return;
        }

        const filteredJobs = data.filter(job => {
            const tags = [...job.languages, ...job.tools, job.role, job.level];
            return terms.every(term => tags.includes(term));
        });
        setJobs(filteredJobs);
    };

I believe you should also call the filterCategory function when a filter term is removed.

One other little detail: You forgot to add the little border on the left of the featured jobs.

All the best.

Marked as helpful