0

He escrito un filter de esta forma para filtrar resultados de una lista y funcion a bien, pasa la lista filtrada como prop al componente que yo quiero, el problema es que quiero poner un if dentro del fiter, tal como se muestra abajo.

const createFilteredList = () => {
        return hotelsData.filter(e => e.country === country)
    }

Pero esto ya no me filtra nada, al pasarlo al componente me dice que es indefinido,si le quito el if tampoco funciona, quiero pasar la lista filtrada al componente HotelCard, no se que esta mal ahí. Gracia por la ayuda

  const createFilteredList = () => {
        hotelsData.filter((e)=> {
            if(country !== "todos"){
                return e.country === country;
            }
        });
        return hotelsData;
    }

Aquí el codigo de la aplicación:

 import {React, useState} from 'react';
    import hotelsData from '../data.js';
    import HotelCard from './HotelCard'



const AllFilters = () => {
    //State para el pais
    const [country, setCountry] = useState("todos");

    const handleCountry = (e) => {
        if(e.target.id === "countryFilter"){
            setCountry(e.target.value);
        }
    }
   

    console.log(country);
    const createFilteredList = () => {
        hotelsData.filter((e)=> {
            if(country !== "todos"){
                return country === e.country;
            }
        });
        return hotelsData;
    }

 
    return (
        <div className="container">
            <input type="date"/>
            <input type="date"/>
            {/*====== select de pais =====*/}
            <select name="" id="countryFilter" value={country} onChange={handleCountry}>
                <option selected value="todos">Todos los paises</option>
                {
                    norepeatCountriesArray.map((singleCountry)=>{
                    return <option value={singleCountry}>{singleCountry}</option>
                    })
                }
            </select>
            <HotelCard newList={createFilteredList()}/>
        </div>
    );
}



export default AllFilters;

lista: 

    const hotelsData = [
     
      {
        slug: 'sainte-jeanne',
        name: 'Sainte Jeanne Boutique & Spa',
        photo: './images/sainte-jeanne.jpg',
        description: 'Sainte Jeanne Hotel Boutique & Spa está ubicado en el corazón de Los Troncos, un barrio residencial y elegante de Mar del Plata. El lujo, el confort y la pasión por los detalles dan personalidad a esta cálida propuesta.',
        availabilityFrom: today.valueOf() + 864000000, // 10 days
        availabilityTo: today.valueOf() + 1296000000, // 15 days
        rooms: 23,
        city: 'Mar del Plata',
        country: 'Argentina',
        price: 2
      },
      {
        slug: 'entre-cielos',
        name: 'Entre Cielos',
        photo: './images/entre-cielos.jpg',
        description: 'Ubicado en una de las regiones vitivinícolas más grandes de América Latina, Entre Cielos fue pensado y construido en un campo de 8 hectáreas rodeado de viñedos malbec y una imponente vista de la Cordillera de Los Andes.',
        availabilityFrom: today.valueOf() + 432000000, // 5 days
        availabilityTo: today.valueOf() + 1296000000, // 15 days
        rooms: 16,
        city: 'Mendoza',
        country: 'Argentina',
        price: 4
      }, 
      {
        slug: 'rincon-del-socorro',
        name: 'Rincón del Socorro',
        photo: './images/rincon-del-socorro.jpg',
        description: 'Rincón del Socorro es una estancia ubicada en la reserva natural de los Esteros del Iberá, un santuario de vida silvestre, donde la Fundación Conservation Land Trust decidió desarrollar un ambicioso proyecto de recuperación y conservación.',
        availabilityFrom: today.valueOf() + 432000000, // 5 days
        availabilityTo: today.valueOf() + 1296000000, // 15 days
        rooms: 11,
        city: 'Corrientes',
        country: 'Argentina',
        price: 2
      },
      {
        slug: 'luma-casa-de-montana',
        name: 'Luma Casa de Montaña',
        photo: './images/luma-casa-de-montana.jpg',
        description: 'Emplazada en un entorno natural a orillas del lago Nahuel Huapi y con la imponente imagen de la Cordillera de Los Andes, Luma Casa de Montaña se presenta majestuosa pero a la vez simple y hogareña: un lugar diferente, atemporal y mágico.',
        availabilityFrom: today.valueOf(),
        availabilityTo: today.valueOf() + 1296000000, // 15 days
        rooms: 8,
        city: 'Villa La Angostura',
        country: 'Argentina',
        price: 2
      },
      
      {
        slug: 'ponta-dos-ganchos',
        name: 'Ponta dos Ganchos',
        photo: './images/uxua-casa.jpg',
        description: 'Ubicado a pasos de San Pablo, Río de Janeiro, e incluso Buenos Aires, en una península privada y rodeado por un pintoresco pueblo de pescadores, se encuentra Ponta dos Ganchos, uno de los resorts de playa más exclusivos del sur de Brasil.',
        availabilityFrom: today.valueOf() + 432000000, // 5 days
        availabilityTo: today.valueOf() + 864000000, // 10 days
        rooms: 25,
        city: 'Santa Catarina',
        country: 'Brasil',
        price: 4
      },
    ]
    
    
    export default hotelsData;
3
  • Hola John. Podes agregar un poco del dato sobre el cual estas haciendo el filter? para tenerlo como ejemplo?
    – jdromero88
    Commented el 6 mar. 2021 a las 16:44
  • 1
    Hola si ya actualicé la pregunta Commented el 6 mar. 2021 a las 16:58
  • 1
    @JohnOsorio, creo que la pregunta ya se contesto aquí, hay un esfuerzo con 3 respuestas orientadas a la pregunta formulada, lo que mencionas de como podría colocarlo para que trabajaran al tiempo eso ya es otra pregunta, no tiene relación con la pregunta original, ya sea que cambies el título de esta pregunta y su planteamiento, o inicies otra pregunta. Parece que lo que tu buscas es un diseño multifiltro, Saludos
    – g.4
    Commented el 6 mar. 2021 a las 23:54

2 respuestas 2

0

Puede utilizar useMemo. Y filter los datos de esta manera:

import {useMemo} from 'react'

const filteredList = useMemo(() => {
  if (country === 'todos') { // Cuando "country" es "todos" entonces no filtrar
    return hotelsData
  }
  return hotelsData.filter(data => country === data.country)
}, [hotelsData, country])
<HotelCard newList={filteredList}/>

useMemo evitará cálculos innecesarios en cada render.

0

Lo que te falta para hacer el if anidado:

createFilteredList = (country) => {
    return hotelsData.filter( hotel => {
    if(hotel.country !== 'all'){
        if(hotel.country === country) {
        return hotel
      }
    }
  })
}

Obs: Al ejemplo del hotelsData le saque el today.valueOf()

Espero que el código de abajo te sirva de guía. Saludos!

const hotelsData = [
  {
    slug: 'entre-cielos',
    name: 'Entre Cielos',
    photo: './images/entre-cielos.jpg',
    description: 'Ubicado en una de las regiones vitivinícolas más grandes de América Latina, Entre Cielos fue pensado y construido en un campo de 8 hectáreas rodeado de viñedos malbec y una imponente vista de la Cordillera de Los Andes.',
    availabilityFrom: 432000000, // 5 days
    availabilityTo: 1296000000, // 15 days
    rooms: 16,
    city: 'Mendoza',
    country: 'Argentina',
    price: 4
  }, 
  {
    slug: 'luma-casa-de-montana',
    name: 'Luma Casa de Montaña',
    photo: './images/luma-casa-de-montana.jpg',
    description: 'Emplazada en un entorno natural a orillas del lago Nahuel Huapi y con la imponente imagen de la Cordillera de Los Andes, Luma Casa de Montaña se presenta majestuosa pero a la vez simple y hogareña: un lugar diferente, atemporal y mágico.',
    availabilityFrom: null,
    availabilityTo: 1296000000, // 15 days
    rooms: 8,
    city: 'Villa La Angostura',
    country: 'Argentina',
    price: 2
  },  
  {
    slug: 'ponta-dos-ganchos',
    name: 'Ponta dos Ganchos',
    photo: './images/uxua-casa.jpg',
    description: 'Ubicado a pasos de San Pablo, Río de Janeiro, e incluso Buenos Aires, en una península privada y rodeado por un pintoresco pueblo de pescadores, se encuentra Ponta dos Ganchos, uno de los resorts de playa más exclusivos del sur de Brasil.',
    availabilityFrom: 432000000, // 5 days
    availabilityTo: 864000000, // 10 days
    rooms: 25,
    city: 'Santa Catarina',
    country: 'Brasil',
    price: 4
  },
]

createFilteredList = (country) => {
    return hotelsData.filter( hotel => {
    if(hotel.country !== 'all'){
        if(hotel.country === country) {
        return hotel
      }
    }
  })
}


console.log( createFilteredList('Brasil') )

2
  • Hola pero eso me regresa un string con el nombre del pais, y no un array con los elementos filtrados Commented el 6 mar. 2021 a las 18:53
  • Discúlpame cometí un error y le puse return country debe de ser return hotel ahi actualize mi respuesta
    – jdromero88
    Commented el 6 mar. 2021 a las 18:59

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.