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 !== "all"){
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"){
console.log(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;