estoy creando un buscador en una pagina web que usa react, con el archivo Searchcard.js intento filtrar los datos usando una operación ternaria
const res = !search ? data : data.filter((dato) => dato.toString().toLowerCase().includes(search.toLocaleLowerCase()))
Esto lo que hace es que cuando search (que es un estado para el input de buscar) este vació me muestra todas las cards (osea sin ningún filtro), pero si es que este search esta con algun valor string entonces busca o mejor dicho filtra los datos según el valor en search. La primera operación se realiza bien, cuando no hay nada en search muestra todas las cards, el problema es que cuando escribo algo en search por alguna razon que desconozco no me muestra ningún dato y el res en vez de que obtenga los datos como arreglo no muestra nada, solo un array vació (esto lo veo gracias al console.log()).
También intente con...
const res = !search ? data : data.filter((dato) => dato.name.toString().toLowerCase().includes(search.toLocaleLowerCase()))
Lo que muestra el archivo console.log cuando se ejecuta y se le asigna un valor para search en el input
El primer archivo console.log es para mostrar lo que captura la entrada de búsqueda, luego nos muestra un archivo console.log(data) que nos muestra los datos de la API, console.log(res) finalmente vemos una matriz que se supone debe almacenar los datos de las tarjetas elegidas por filtrado pero aparentemente esta vació
Agradecería si es que pudieran ayudarme a encontrar el error de este problema. Dejare los codigos de Searchcard.js, el codigo de como saque los datos y como se crean las cards.
Searchcard.js
import React from 'react'
import { useState } from 'react'
import {Cards} from '../cards/Cards'
import { UseFetch } from '../UseFetch'
export const Searchcard = () => {
//hooks
const [url, setUrl] = useState("https://aves.ninjas.cl/api/birds")
const estado = UseFetch(url) /*Devuelve el objeto que tiene UseFetch (cargando, data) */
const {cargando, data} = estado /*obtener los datos del objeto que entrego UseFetch */
const [search, setSearch] = useState("")
//Funcion que nos ayuda a capturar los valores dados por el usuario
const searcher = (e) => {
setSearch(e.target.value)
console.log(e.target)
}
//Filtramos los datos
const res = !search ? data : data.filter((dato) => dato.name.toString().toLowerCase().includes(search.toLocaleLowerCase()))
return (
<div>
<input value={search} onChange={searcher} type="text" placeholder='¡Busca un pajaro!' className='form-control'></input>
{
cargando
?
<h1>Cargando...</h1>
:
<div>
<Cards data={res} />
{console.log(data)}
{console.log(res)}
</div>
}
</div>
)
}
export default Searchcard
Los datos los saco desde una API publica.
Para lograr sacar los datos uso
UseFetch.js
import { useState, useEffect } from 'react'
export const UseFetch = (url) => {
const [resultado, setResultado] = useState({ cargando: true, dato: null })
useEffect( ()=>{
getData(url)
},[url])
async function getData(url) {
try{
setResultado({cargando: true, data:null})
const respues = await fetch(url)
const data = await respues.json()
setResultado({ cargando: false, data })
}
catch(e){
console.log(e)
}
}
return resultado
}
Para crear las cards uso cards.js y cardsbird.js
cards.js
import React, {useState} from 'react'
import {Cardsbird} from './Cardsbird'
import './Cards.css'
import Paginacion from '../Pagination/Pagination'
export const Cards = ({data}) => {
const [actPag, setactPag] = useState(1)
const [cardXpag] = useState(20)
//
const indUltimo = actPag * cardXpag;
const indPrimero = indUltimo - cardXpag;
const actCard = data.slice(indPrimero, indUltimo);
//Cambiar pagina
const paginate = numPag => setactPag(numPag);
return (
<div className='container'>
<ul className='cards'>
{ actCard.map(p=>(
<li className='card-item' key={p.uid}>
<Cardsbird url={p._links.self}/>
</li>
))
}
<div className='container2'><Paginacion cardXpag={cardXpag} totalCards={data.length} paginate={paginate}/></div>
</ul>
</div>
)
}
export default Cards
cardsbird.js
import React from 'react'
import { UseFetch } from '../UseFetch'
import Modal from './Modal'
export const Cardsbird = ({url}) => {
const estado = UseFetch(url)
const {cargando, data} = estado
return (
<div>
{
cargando
?
<h1>Cargando...</h1> :
<div className='card' style={{width:'14rem'}} data-bs-toggle="modal" data-bs-target={`#id${data.sort}`}>
<div className='card-header'>
<h5 className='card-title'>{data.name.spanish}</h5>
</div>
<div className='card-body'>
<img src={data.images.main} alt={data.uid} />
</div>
<Modal id={`id${data.sort}`} titulo={data.name.spanish} imagen={data.images.main} audio={data.audio.file} descripcion={data.iucn.description} habitat={data.habitat} tamaño={data.size} mapa={data.map.image} />
</div>
}
</div>
)
}
export default Cardsbird