Static jobs listings with filter using React Js

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.

Greetings Kelvin Here are a few things that i managed to pick

• The site is responsive , well done
• The filter is not working as expected - it is only filtering the last selected choice without considering other previous selected choices.
• headings are not in order. The first level heading should be an h1 then followed by an h2. Skipping headings is not recommended.

Happy coding