list .filter((val) => { if ( val.name.toLocaleLowerCase().includes(input)) ) { return val } }) .map((val, idx) => ( <Li key={idx} /> ))
Usando esta estructura, quería hacer algo si regresa vacío.
Ej.: Al buscar "abc" y no hay "abc" en la lista, aparece un mensaje que dice que no se encontró "abc".
Varias cosas para cambiar:
list .filter((val) => { if ( val.name.toLocaleLowerCase().includes(input)) ) { return val } })
puede ser solo
list .filter(val => val.name.toLocaleLowerCase().includes(input)
Recuerde que la función dentro del filter
solo devuelve un true
o false
. Por casualidad, su expresión, que devuelve el elemento de la lista real, se interpreta como true
, y cuando su expresión no coincide, no devuelve nada, lo que tiene el mismo efecto que devolver false
. Expresarlo como arriba hace más claro lo que está haciendo (y es un poco más rápido).
const matches = list.filter(val => val.name.toLocaleLowerCase().includes(input) const output = (matches.length>0) ? matches.map((val, idx) => ( <Li key={idx} /> )) : ( <div>Not found</div> )
Puede saber si la lista está vacía usando "filtro" y "mapa" usando el siguiente código JavaScript:
list .filter((value) => (value!==undefined) && (value!==null) && value.name.toLocaleLowerCase().includes(input))) .map((value, id) => ( <Li key={id} /> ))