title: React filtering with checkboxes
body: <p>I struggle so bad about making a filtered array with checkbox inputs. My issue is I can do just filtering by just one of the filtering conditions.</p>
  <p>For example, if I checked 3 of the checkboxes e.g breakfast, pool, and gym, I only want those true ones of all my array objects that wanted to be filtered. But instead of that, it's still filtering the truest ones of the array. Including not the true ones. When I checked all the features, If all my conditions aren't true, I want it to say &quot;no match&quot;.</p>
  <p>I know my code is a little bit messy but if you can help me I would be so grateful.</p>
  <p>Thank you.</p>
  <p>Context API:</p>
  <pre><code>const [myHotel] = useState(
              [
              {
                  id: uuidv4(),
                  title: &quot;Beach Hotel&quot;,
                  avaibleRoom: 16,
                  hotel_img: &quot;https://images.unsplash.com/photo-1566073771259-6a8506099945?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80&quot;,
                  hotel_room_img: [
                          &quot;https://images.unsplash.com/photo-1570214476695-19bd467e6f7a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;ixlib=rb-1.2.1&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80&quot;,
                          &quot;https://images.unsplash.com/photo-1559599189-fe84dea4eb79?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80&quot;,
                          &quot;https://images.unsplash.com/photo-1582582484783-0a7a9e45b0d6?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80&quot;,
                         ],    
                  luks: false,
                  maxCapacity: 39,
                  breakfast: true,
                  freeotopark: true,
                  pool: true,
                  wifi: true,
                  gym: false,
                  bar: true,
                  beach: true,
                  minigolf: false,
                  price: 1730,
              },
      
              {
                  id: uuidv4(),
                  title: &quot;Luxurios Hotel&quot;,
                  avaibleRoom: 17,
                  hotel_img: &quot;https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80&quot;,
                  hotel_room_img: [
                      &quot;https://images.unsplash.com/photo-1559599238-308793637427?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80&quot;,
                      &quot;https://images.unsplash.com/photo-1565330502637-963b256876c6?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1349&amp;q=80&quot;,
                      &quot;https://images.unsplash.com/photo-1559599242-651c4e085efb?ixlib=rb-1.2.1&amp;ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&amp;auto=format&amp;fit=crop&amp;w=1350&amp;q=80&quot;,
                  ],  
                  luks: true,
                  maxCapacity: 51,
                  breakfast: true,
                  freeotopark: false,
                  pool: true,
                  wifi: true,
                  gym: true,
                  bar: false,
                  beach: true,
                  minigolf: false,
                  price: 2670,
              },
  </code></pre>
  <p>Here is my functions:</p>
  <pre><code>function Hotels() {
       /** CONTEXT API DATA **/
       const hotelContext = useContext(HotelsContext); 
      const {myHotel} = hotelContext; 
      
      /** NEW FILTERED HOTEL STATE  **/
      const [newHotel, setNewHotel] = useState([]);
  
     /** checkboxes true or false data**/
      const [handleCheck, setHandleCheck] = useState({});
      
  
       const handleChange =  (e) =&gt; {
              setHandleCheck({...handleCheck, [e.target.name]: e.target.checked})
          }
  
         useEffect(() =&gt; {
          function filterbyName (value) {
              if(handleCheck !== undefined) {
                  if(handleCheck.breakfast === true) {
                      return value.breakfast === true
                  } else if (handleCheck.luks === true) {
                      return value.luks === true
                  } else if (handleCheck.freeotopark === true) {
                      return value.freeotopark === true
                  } else if (handleCheck.pool === true) {
                      return value.pool === true
                  } else if (handleCheck.wifi === true) {
                      return value.wifi === true
                  } else if (handleCheck.gym === true) {
                      return value.gym === true
                  } else if (handleCheck.bar === true) {
                      return value.bar === true
                  } else if (handleCheck.beach === true) {
                      return value.beach === true
                  } else if (handleCheck.minigolf === true) {
                      return value.minigolf === true
                  } else {
                      return value
                  }
              } else {
                  return value
              }
          }
        
          setNewHotel(
              myHotel.filter(filterbyName)
          )
         }, [handleCheck, myHotel])
  </code></pre>