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