Tengo una barra de búsqueda que filtra a través de una matriz que contiene un objeto:
const [termList, setTermList] = useState([{term_name: 'Name', definition: 'This is a glossary term'}]); const filtered = termList.filter((term) => Object.values(term).some( (val) => typeof val === "string" && term.term_name.includes(searched.toLowerCase()) ) ); return ( <div> <input type="text" value={searched} onChange={(ev) => setSearched(ev.target.value)} /> </div> <div className="termList"> {filtered.map((term) => ( <div> <div>{term.term_name.toLowerCase()}</div> <div>{term.definition} </div> ))} </div> );Sin embargo, cuando filtro a través de la lista, si escribo en la barra de búsqueda la letra 'n', mi lista filtrada está vacía aunque el único objeto dentro de la matriz tiene un nombre que comienza con una 'n'.
Aún más extraño es que cuando escribo en la barra de búsqueda 'a', 'am' o 'ame', mi lista filtrada incluye el objeto.
Está searched minúsculas pero no term.term_name , 'n' no está en 'Name', 'N' está. Necesitas hacer
term.term_name.toLowerCase().includes(searched.toLowerCase())también puedes hacer esto, en lugar de hacer una función filtered
const [termList, setTermList] = useState([{term_name: 'Name', definition: 'This is a glossary term'}]); return ( <div> <input type="text" value={searched} onChange={(ev) => setSearched(ev.target.value)} /> </div> <div className="termList"> {termList.filter(item => (search ? item.term_name?.toLowerCase().includes(searched.toLowerCase()) : true)).map((term) => ( <div> <div>{term.term_name.toLowerCase()}</div> <div>{term.definition} </div> ))} </div> );