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} /> ))