I'm trying to return a div with 'no result found' text if the input is not found in database, I tried different ways but the div won't render if it's inside of the filter callback function. Is there another way to approach this?
{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 />}
Yes, the best way to do this is seperate your concerns
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>
You can also do it as a component
const Posters = () => {
...
};
return <div><Posters /></div>
But this could cause unnecessary re-renders of the posters list.