title: React How to Filter Data Array using Multiple Checkbox
body: <p>I intend to filter data by selecting different checkbox through the following codes:</p>
  <pre><code>const movieData = [
    {
      title: &quot;movie 0&quot;,
      genre: &quot;&quot;
    },
    {
      title: &quot;movie 1&quot;,
      genre: [&quot;action&quot;, &quot;thriller&quot;]
    },
    {
      title: &quot;movie 2&quot;,
      genre: [&quot;comedy&quot;, &quot;drama&quot;]
    },
    {
      title: &quot;movie 3&quot;,
      genre: [&quot;comedy&quot;, &quot;action&quot;]
    },
    { title: &quot;movie 4&quot;, genre: &quot;thriller&quot; },
    {
      title: &quot;movie 5&quot;,
      genre: &quot;comedy&quot;
    },
    {
      title: &quot;movie 6&quot;,
      genre: &quot;action&quot;
    },
    {
      title: &quot;movie 7&quot;,
      genre: &quot;drama&quot;
    }
  ];
  </code></pre>
  <hr />
  <pre><code>const movie = [
    { genre: &quot;thriller&quot; },
    { genre: &quot;comedy&quot; },
    { genre: &quot;action&quot; },
    { genre: &quot;drama&quot; }
  ];
  
  const FilterMethod01 = () =&gt; {
    const [genre, setGenre] = useState([&quot;&quot;]);
    const [filteredGenre, setFilteredGenre] = useState([&quot;&quot;]);
  
    const handleChange = e =&gt; {
      if (e.target.checked) {
        setGenre([...genre, e.target.value]);
      } else {
        setGenre(genre.filter(id =&gt; id !== e.target.value));
      }
    };
  
    useEffect(() =&gt; {
      setFilteredGenre(
        movieData.filter(movie =&gt;
          genre.some(category =&gt; category === movie.genre)
        )
      );
    }, [genre]);
  
    return (
      &lt;Fragment&gt;
        &lt;FormControl&gt;
          &lt;FormGroup&gt;
            {movie.map(movie =&gt; (
              &lt;FormControlLabel
                control={&lt;Checkbox onChange={handleChange} /&gt;}
                label={movie.genre}
                value={movie.genre}
              /&gt;
            ))}
          &lt;/FormGroup&gt;
        &lt;/FormControl&gt;
  
        {filteredGenre
          .map((movie, index) =&gt; (
            &lt;Card style={{ background: &quot;lightgreen&quot;, marginBottom: &quot;5px&quot; }}&gt;
              &lt;Typography gutterBottom variant=&quot;h6&quot; noWrap&gt;
                title: {movie.title}
              &lt;/Typography&gt;
              &lt;Typography gutterBottom variant=&quot;h6&quot; noWrap&gt;
                genre: {movie.genre}
              &lt;/Typography&gt;
            &lt;/Card&gt;
          ))}
      &lt;/Fragment&gt;
    );
  };
  </code></pre>
  <p>However, I have the following problems with this code:</p>
  <ol>
  <li><p>All the mapped data <code>[&quot;movie 0&quot;, &quot;movie 1&quot;, &quot;movie 2&quot;, &quot;movie 3&quot;...]</code> doesn't appear by default. How can I get all the mapped data to appear by default?</p>
  </li>
  <li><p>The mapped data only filters a single string (e.g. <code>{genre: &quot;&quot;}</code> ) instead of an array of strings (e.g. <code>{genre: [&quot;thriller&quot;, &quot;action&quot;]}</code>). How can I select the &quot;action&quot; checkbox to trigger &quot;movie 1&quot;, &quot;movie 3&quot;, &amp; &quot;movie 6&quot; to appear?
  <br/>
  <br/>
  <br/>
  #<strong>Checkout my <a href="https://codesandbox.io/s/youthful-stallman-ut7y6?file=/src/FilterMethod01.js" rel="nofollow noreferrer">codesandbox here</a>.</strong>#
  <br/>
  <br/>
  <br/>
  If there are other better practices to achieve this result, please let me know as well. Thank you so much guys!</p>
  </li>
  </ol>