title: Job Listing Filtering React
body: <p>I'm having trouble figuring out how to filter this job listing that I found in frontend mentor.</p>
  <p>The filtering partially works. For example, if I add HTML and Senior tag, it filters it correctly. But the logic isn't right cause I test it for other tags and the result doesn't come out as expected.</p>
  <p>I appreciate any help to get pointed at the right direction.</p>
  <p>this is my App.js code</p>
  <pre><code>import './App.css';
  import axios from 'axios';
  import React, {useState,useEffect} from &quot;react&quot;;
  
  import Card from &quot;./components/card/Card&quot;;
  import Header from &quot;./components/header/Header&quot;;
  import FilterBar from &quot;./components/FilterBar/FilterBar&quot;;
  
  function App() {
      const [data, setData] = useState([]);
      const URL = 'http://localhost:3000/data.json';
  
      const [category, setCategory] = useState([]);
      console.log(&quot;category is &quot; + category);
  
      useEffect(() =&gt; {
          axios.get(URL).then((response) =&gt; {
              setData(response.data);
              //console.log(data);
          });
      }, []);
  
      /*useEffect(() =&gt; {
  
      }, []);*/
  
      function addItem(item){
          console.log(&quot;addItem &quot; + item);
  
          const duplicateItem = category.find((collection) =&gt; collection === item);
  
          if(!duplicateItem){
              setCategory([...category, item]);
          } else {
              alert(item + &quot; is already in the list.&quot;);
          }
      }
  
      function removeAllItems(items, counter){
          if(counter &gt; 0){
              setCategory(items);
  
          } else {
              alert(&quot;There are no items in the filter bar to remove.&quot;);
          }
      }
  
    return (
      &lt;div className=&quot;App&quot;&gt;
        &lt;Header /&gt;
          {
              category.length &gt; 0 ?
                  &lt;FilterBar removeAllItems={removeAllItems} languages={category} /&gt;
                  :
                  &quot;&quot;
          }
          {
              Object.keys(data).map((item, index) =&gt; (
                  category.length &lt; 1 ?
                 &lt;Card
                      key={index}
                      data_company_name={data[item].company}
                      data_logo={data[item].logo}
                      data_new={data[item].new}
                      data_featured={data[item].featured}
                      data_position={data[item].position}
                      data_languages={data[item].languages}
                      data_level={data[item].level}
                      data_role={data[item].role}
                      data_posted_at={data[item].postedAt}
                      data_contract={data[item].contract}
                      data_location={data[item].location}
                      data_tools={data[item].tools}
                      addItem={addItem}
                  /&gt;
                  : category.includes(data[item].level)
                  || category.includes(data[item].role)
                  || category.every((language) =&gt; data[item].languages.includes(language))
                  || category.every((tool) =&gt; data[item].tools.includes(tool))
  
                   ?
                  &lt;Card
                      key={index}
                      data_company_name={data[item].company}
                      data_logo={data[item].logo}
                      data_new={data[item].new}
                      data_featured={data[item].featured}
                      data_position={data[item].position}
                      data_languages={data[item].languages}
                      data_level={data[item].level}
                      data_role={data[item].role}
                      data_posted_at={data[item].postedAt}
                      data_contract={data[item].contract}
                      data_location={data[item].location}
                      data_tools={data[item].tools}
                      addItem={addItem}
                  /&gt;
                      : &quot;&quot;
  
              ))}
      &lt;/div&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>This is the Card.js</p>
  <pre><code>import {StyledCard} from './Card.styled';
  
  const Card = ({addItem, data_logo, data_company_name, data_new, data_featured, data_position, data_languages, data_level, data_role, data_contract, data_posted_at, data_location, data_tools}) =&gt; {
  
      const data = data_languages.map( (language, index) =&gt; {
  
          return &lt;span onClick={() =&gt; addItem(language) } key={index} className={`role-tag-${index}`}&gt;{language}&lt;/span&gt;;
  
      });
  
      const tools_data = data_tools.map( (tool, index) =&gt; {
          return &lt;span key={index} onClick={() =&gt; addItem(tool) } className={`data-tools`}&gt;{tool}&lt;/span&gt;
      });
  
      return (
          &lt;&gt;
              &lt;div className={`card-container`}&gt;
                  &lt;StyledCard&gt;
                      &lt;div className={`inside-card-wrapper`}&gt;
                          &lt;div className={`img`}&gt;
                              &lt;img src={data_logo} alt=&quot;&quot;/&gt;
                              &lt;div className={`company-tag-wrapper`}&gt;
                                  &lt;span className={`company-name`}&gt;{data_company_name}&lt;/span&gt;
                                  {
                                      data_new === true ?
                                          &lt;span className={`job-tag-new`}&gt;NEW!&lt;/span&gt;
                                          :
                                          &quot;&quot;
                                  }
                                  {
                                      data_featured === true ?
                                          &lt;span className={`job-tag-featured`}&gt;FEATURED&lt;/span&gt;
                                          :
                                          &quot;&quot;
                                  }
  
                                  &lt;div className={`role-title`}&gt;
                                      &lt;div&gt;&lt;strong&gt;{data_position}&lt;/strong&gt;&lt;/div&gt;
                                      &lt;div className={`role-tags`}&gt;
                                          &lt;span onClick={() =&gt; addItem(data_role)} className={`data-role`}&gt;{data_role}&lt;/span&gt;
                                          &lt;span onClick={() =&gt; addItem(data_level) } className={`data-level`}&gt;{data_level}&lt;/span&gt;
                                          {data}
                                          {tools_data}
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                                  &lt;div className={`job-type-wrapper`}&gt;
                                      &lt;div className={`post`}&gt;
                                          &lt;span&gt;{data_posted_at}&lt;/span&gt;
                                          &amp;bull;
                                          &lt;span&gt;{data_contract}&lt;/span&gt;
                                          &amp;bull;
                                          &lt;span&gt;{data_location}&lt;/span&gt;
                                      &lt;/div&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/StyledCard&gt;
              &lt;/div&gt;
          &lt;/&gt;
      );
  };
  
  export default Card;
  </code></pre>
  <p>This is the FilterBar.js file</p>
  <pre><code>import {StyledFilterBar} from &quot;./FilterBar.styled&quot;;
  
  const FilterBar = ({removeAllItems, languages}) =&gt; {
  
      //console.log(&quot;FilterBar.js &quot; + items);
  
      let counter = 0;
  
      const data = languages.map( (item, index) =&gt; {
          counter = languages.length;
          return &lt;div key={index}&gt;{item}&amp;nbsp;&lt;/div&gt;
      });
  
      return (
          &lt;div&gt;
              &lt;StyledFilterBar&gt;
                  &lt;div className={`filter-options`}&gt;
                      &lt;div className={`left-side`}&gt;
                          {data}
                      &lt;/div&gt;
                      &lt;div className={`right-side`}&gt;
                          &lt;div onClick={() =&gt; removeAllItems([], counter) } className={`clear`}&gt;clear&lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/StyledFilterBar&gt;
          &lt;/div&gt;
      );
  };
  
  export default FilterBar;
  </code></pre>
  <p>This is the json file that contains the data</p>
  <pre><code>[
    {
      &quot;id&quot;: 1,
      &quot;company&quot;: &quot;Photosnap&quot;,
      &quot;logo&quot;: &quot;./img/photosnap.svg&quot;,
      &quot;new&quot;: true,
      &quot;featured&quot;: true,
      &quot;position&quot;: &quot;Senior Frontend Developer&quot;,
      &quot;role&quot;: &quot;Frontend&quot;,
      &quot;level&quot;: &quot;Senior&quot;,
      &quot;postedAt&quot;: &quot;1d ago&quot;,
      &quot;contract&quot;: &quot;Full Time&quot;,
      &quot;location&quot;: &quot;USA Only&quot;,
      &quot;languages&quot;: [&quot;HTML&quot;, &quot;CSS&quot;, &quot;JavaScript&quot;],
      &quot;tools&quot;: []
    },
    {
      &quot;id&quot;: 2,
      &quot;company&quot;: &quot;Manage&quot;,
      &quot;logo&quot;: &quot;./img/manage.svg&quot;,
      &quot;new&quot;: true,
      &quot;featured&quot;: true,
      &quot;position&quot;: &quot;Fullstack Developer&quot;,
      &quot;role&quot;: &quot;Fullstack&quot;,
      &quot;level&quot;: &quot;Midweight&quot;,
      &quot;postedAt&quot;: &quot;1d ago&quot;,
      &quot;contract&quot;: &quot;Part Time&quot;,
      &quot;location&quot;: &quot;Remote&quot;,
      &quot;languages&quot;: [&quot;Python&quot;],
      &quot;tools&quot;: [&quot;React&quot;]
    },
    {
      &quot;id&quot;: 3,
      &quot;company&quot;: &quot;Account&quot;,
      &quot;logo&quot;: &quot;./img/account.svg&quot;,
      &quot;new&quot;: true,
      &quot;featured&quot;: false,
      &quot;position&quot;: &quot;Junior Frontend Developer&quot;,
      &quot;role&quot;: &quot;Frontend&quot;,
      &quot;level&quot;: &quot;Junior&quot;,
      &quot;postedAt&quot;: &quot;2d ago&quot;,
      &quot;contract&quot;: &quot;Part Time&quot;,
      &quot;location&quot;: &quot;USA Only&quot;,
      &quot;languages&quot;: [&quot;JavaScript&quot;],
      &quot;tools&quot;: [&quot;React&quot;, &quot;Sass&quot;]
    },
    {
      &quot;id&quot;: 4,
      &quot;company&quot;: &quot;MyHome&quot;,
      &quot;logo&quot;: &quot;./img/myhome.svg&quot;,
      &quot;new&quot;: false,
      &quot;featured&quot;: false,
      &quot;position&quot;: &quot;Junior Frontend Developer&quot;,
      &quot;role&quot;: &quot;Frontend&quot;,
      &quot;level&quot;: &quot;Junior&quot;,
      &quot;postedAt&quot;: &quot;5d ago&quot;,
      &quot;contract&quot;: &quot;Contract&quot;,
      &quot;location&quot;: &quot;USA Only&quot;,
      &quot;languages&quot;: [&quot;CSS&quot;, &quot;JavaScript&quot;],
      &quot;tools&quot;: []
    },
    {
      &quot;id&quot;: 5,
      &quot;company&quot;: &quot;Loop Studios&quot;,
      &quot;logo&quot;: &quot;./img/loop-studios.svg&quot;,
      &quot;new&quot;: false,
      &quot;featured&quot;: false,
      &quot;position&quot;: &quot;Software Engineer&quot;,
      &quot;role&quot;: &quot;Fullstack&quot;,
      &quot;level&quot;: &quot;Midweight&quot;,
      &quot;postedAt&quot;: &quot;1w ago&quot;,
      &quot;contract&quot;: &quot;Full Time&quot;,
      &quot;location&quot;: &quot;Worldwide&quot;,
      &quot;languages&quot;: [&quot;JavaScript&quot;],
      &quot;tools&quot;: [&quot;Ruby&quot;, &quot;Sass&quot;]
    },
    {
      &quot;id&quot;: 6,
      &quot;company&quot;: &quot;FaceIt&quot;,
      &quot;logo&quot;: &quot;./img/faceit.svg&quot;,
      &quot;new&quot;: false,
      &quot;featured&quot;: false,
      &quot;position&quot;: &quot;Junior Backend Developer&quot;,
      &quot;role&quot;: &quot;Backend&quot;,
      &quot;level&quot;: &quot;Junior&quot;,
      &quot;postedAt&quot;: &quot;2w ago&quot;,
      &quot;contract&quot;: &quot;Full Time&quot;,
      &quot;location&quot;: &quot;UK Only&quot;,
      &quot;languages&quot;: [&quot;Ruby&quot;],
      &quot;tools&quot;: [&quot;RoR&quot;]
    },
    {
      &quot;id&quot;: 7,
      &quot;company&quot;: &quot;Shortly&quot;,
      &quot;logo&quot;: &quot;./img/shortly.svg&quot;,
      &quot;new&quot;: false,
      &quot;featured&quot;: false,
      &quot;position&quot;: &quot;Junior Developer&quot;,
      &quot;role&quot;: &quot;Frontend&quot;,
      &quot;level&quot;: &quot;Junior&quot;,
      &quot;postedAt&quot;: &quot;2w ago&quot;,
      &quot;contract&quot;: &quot;Full Time&quot;,
      &quot;location&quot;: &quot;Worldwide&quot;,
      &quot;languages&quot;: [&quot;HTML&quot;, &quot;JavaScript&quot;],
      &quot;tools&quot;: [&quot;Sass&quot;]
    },
    {
      &quot;id&quot;: 8,
      &quot;company&quot;: &quot;Insure&quot;,
      &quot;logo&quot;: &quot;./img/insure.svg&quot;,
      &quot;new&quot;: false,
      &quot;featured&quot;: false,
      &quot;position&quot;: &quot;Junior Frontend Developer&quot;,
      &quot;role&quot;: &quot;Frontend&quot;,
      &quot;level&quot;: &quot;Junior&quot;,
      &quot;postedAt&quot;: &quot;2w ago&quot;,
      &quot;contract&quot;: &quot;Full Time&quot;,
      &quot;location&quot;: &quot;USA Only&quot;,
      &quot;languages&quot;: [&quot;JavaScript&quot;],
      &quot;tools&quot;: [&quot;Vue&quot;, &quot;Sass&quot;]
    },
    {
      &quot;id&quot;: 9,
      &quot;company&quot;: &quot;Eyecam Co.&quot;,
      &quot;logo&quot;: &quot;./img/eyecam-co.svg&quot;,
      &quot;new&quot;: false,
      &quot;featured&quot;: false,
      &quot;position&quot;: &quot;Full Stack Engineer&quot;,
      &quot;role&quot;: &quot;Fullstack&quot;,
      &quot;level&quot;: &quot;Midweight&quot;,
      &quot;postedAt&quot;: &quot;3w ago&quot;,
      &quot;contract&quot;: &quot;Full Time&quot;,
      &quot;location&quot;: &quot;Worldwide&quot;,
      &quot;languages&quot;: [&quot;JavaScript&quot;, &quot;Python&quot;],
      &quot;tools&quot;: [&quot;Django&quot;]
    },
    {
      &quot;id&quot;: 10,
      &quot;company&quot;: &quot;The Air Filter Company&quot;,
      &quot;logo&quot;: &quot;./img/the-air-filter-company.svg&quot;,
      &quot;new&quot;: false,
      &quot;featured&quot;: false,
      &quot;position&quot;: &quot;Front-end Dev&quot;,
      &quot;role&quot;: &quot;Frontend&quot;,
      &quot;level&quot;: &quot;Junior&quot;,
      &quot;postedAt&quot;: &quot;1mo ago&quot;,
      &quot;contract&quot;: &quot;Part Time&quot;,
      &quot;location&quot;: &quot;Worldwide&quot;,
      &quot;languages&quot;: [&quot;JavaScript&quot;],
      &quot;tools&quot;: [&quot;React&quot;, &quot;Sass&quot;]
    }
  ]
  </code></pre>