Estoy filtrando datos en función de los textos escritos en el cuadro de búsqueda. Primero estoy filtrando los datos y luego mapeándolos. Mi código funciona como se esperaba, pero existe la repetición de una función, así que lo coloco en la carpeta util
y luego lo uso en el archivo. Pero el problema es que el valor que obtengo no está undefined
por esa función de utilidad.
Código anterior de Members.js:
import React from 'react' import members from '../members.json' function Member({searchTerm}) { return ( <div> { members.filter((ele) => ele.first_name .toLowerCase() .includes(searchTerm.toLocaleLowerCase()) || ele.last_name .toLowerCase() .includes(searchTerm.toLocaleLowerCase())) .map(ele => { return ( <div key={ele.id}> <h1>Name: {ele.first_name} {ele.last_name}</h1> </div> ) }) } </div> ) } export default Member
Mi nuevo enfoque con Utils
utils/helper.js:
const searchMembers = (membersArr, searchTerm) => { return membersArr.filter( (ele) => ele.first_name .toLowerCase() .includes(searchTerm.toLocaleLowerCase()) || ele.last_name.toLowerCase().includes(searchTerm.toLocaleLowerCase()) ); } export { searchMembers }
Miembros.js
import React from 'react' import members from '../members.json' import {searchMembers} from '../utils/helper' function Member({searchTerm}) { const {searchMember} = searchMembers(members, searchTerm) console.log('searchMember:', searchMember) //undefined return ( <div> { searchMember.map(ele => { return ( <div key={ele.id}> <h1>Name: {ele.first_name} {ele.last_name}</h1> </div> ) }) } </div> ) } export default Member
Para el enfoque anterior, recibo el error searchMember.filter is not a function
.
¿Pueden por favor ayudarme?
Gracias
Su método searchMembers
devuelve los resultados filtrados directamente. Mientras que su código
const {searchMember} = searchMembers(members, searchTerm)
intenta extraer un miembro de searchMember
de los datos devueltos ( a través de la desestructuración ).
usar
const searchMember = searchMembers(members, searchTerm)