dimanche 11 avril 2021

React filtering with checkboxes

I'm struggled 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. 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 wanted to be filtered. But instead of that, it's still filtering the most true 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 "no match". I know my code is a little bit messy but if you can help me i would be so grateful. Thank you.

Context api:

const [myHotel] = useState(
            [
            {
                id: uuidv4(),
                title: "Beach Hotel",
                avaibleRoom: 16,
                hotel_img: "https://images.unsplash.com/photo-1566073771259-6a8506099945?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80",
                hotel_room_img: [
                        "https://images.unsplash.com/photo-1570214476695-19bd467e6f7a?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80",
                        "https://images.unsplash.com/photo-1559599189-fe84dea4eb79?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80",
                        "https://images.unsplash.com/photo-1582582484783-0a7a9e45b0d6?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80",
                       ],    
                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: "Luxurios Hotel",
                avaibleRoom: 17,
                hotel_img: "https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80",
                hotel_room_img: [
                    "https://images.unsplash.com/photo-1559599238-308793637427?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80",
                    "https://images.unsplash.com/photo-1565330502637-963b256876c6?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1349&q=80",
                    "https://images.unsplash.com/photo-1559599242-651c4e085efb?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1350&q=80",
                ],  
                luks: true,
                maxCapacity: 51,
                breakfast: true,
                freeotopark: false,
                pool: true,
                wifi: true,
                gym: true,
                bar: false,
                beach: true,
                minigolf: false,
                price: 2670,
            },

Here is my functions:

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) => {
            setHandleCheck({...handleCheck, [e.target.name]: e.target.checked})
        }

       useEffect(() => {
        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])



Aucun commentaire:

Enregistrer un commentaire