Estoy tratando de devolver un div con el texto 'no se encontró ningún resultado' si la entrada no se encuentra en la base de datos, probé de diferentes maneras, pero el div no se procesará si está dentro de la función de devolución de llamada del filtro. ¿Hay otra forma de abordar esto?
{posters ? < Card className="list-group" > {posters.filter((value) => { if (search === '' || value.title.toLowerCase().includes(search)) { return value } }).map((posters) => { return (<MainCard > <HeaderContainer > <HeaderCard > <Name>{posters.title}</Name> <Name style={{ fontSize: '60px', color: '#FF10F0', textAlign: 'center' }}>{posters.description}</Name> </HeaderCard> </HeaderContainer> </MainCard>) }) } </Card > : <Loading />}Sí, la mejor manera de hacerlo es separar sus inquietudes.
const getPosters = () => { if(!posters) return <Loading />; const filtered = posters.filter((value) => { if (search === '' || value.title.toLowerCase().includes(search)) { return value; } }); if(!filtered.length) return <span>No Results Found</span> return (< Card className="list-group" >{ filtered.map(({title, description}) => { return (<MainCard > <HeaderContainer > <HeaderCard > <Name>{title}</Name> <Name style={{ fontSize: '60px', color: '#FF10F0', textAlign: 'center' }}>{description}</Name> </HeaderCard> </HeaderContainer> </MainCard>) }) }</Card>); } // Your render method return <div>{ getPosters() }</div>También puedes hacerlo como un componente.
const Posters = () => { ... }; return <div><Posters /></div>Pero esto podría causar repeticiones innecesarias de la lista de carteles.