Return 'no result found' state on search in React

user_6512645 0
Viewed 384

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 />}
reactjs frontend search javascript
1 Answers

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.

user_5551480
Related