CODEWITHSUNDEEP
javascriptcssreactjs
DhruvK
DhruvK

Reputation: 348

How to display a message inside an empty div when a component doesn't render in it?

I have a div inside which I'm rendering dynamic card components(SearchRes):

<div className="search-res">
            {games.filter(game => (game.background_image !== null)&&(game.ratings_count>38)).map(game=>
            <SearchRes
            key={game.name} 
            title={game.name} 
            rating={game.metacritic===null?<MdGamepad/>:game.metacritic} 
            genre={game.genres.map(genre=>genre.name+" ")} 
            imglnk={(game.background_image===null)?"":game.background_image}
            gameid={game.id}
            slug={game.slug}
            plat={game.parent_platforms}
            />
            )}
 </div>

When the cards don't render (when they don't pass the filter conditions), I get a blank space. I want to display something like no results found when such thing happens, how can I implement this? Currently I'm using CSS to implement it:

.search-res:empty::before {
content: "No data";}

but clearly this is not viable as the message is visible when the search is not even initiated: message displayed when search isn't even initiated

Upvotes: 2

Views: 703

Answers (3)

Drew Reese
Drew Reese

Reputation: 202686

If I understand your question, you want to conditionally render a "No Data" fallback only after you've fetched data and there is nothing to render.

  1. Add a loading state and conditionally render a loading indicator.

  2. Filter the games and in the render check that there is an array length (i.e. something to map), and conditionally render the array or the fallback text if there is a current search term.

Code

const [searchLoaded, setSearchLoaded] = React.useState(false);

// in search handler
// toggle searchLoaded false when initiating a search
// toggle searchLoaded true when search completes

const results = games.filter(
  game => game.background_image !== null && game.ratings_count > 38
);

<div className="search-res">
  {results.length
    ? results.map(game => (
      <SearchRes
        key={game.name} 
        title={game.name} 
        rating={game.metacritic === null ? <MdGamepad/> : game.metacritic} 
        genre={game.genres.map(({ name }) => name).join(" ")} 
        imglnk={game.background_image === null ? "" : game.background_image}
        gameid={game.id}
        slug={game.slug}
        plat={game.parent_platforms}
      />
    ))
    : searchLoaded && "No Data"
  }
</div>

Upvotes: 1

Syed Muhammad Moiz
Syed Muhammad Moiz

Reputation: 445

if you are using a filter only for conditioning then there is no need for a filter instead you can use conditional rendering like this:

<div className="search-res">
            {games.map(game=>
            {(game.background_image !== null && game.ratings_count>38) ?
            <SearchRes
            key={game.name} 
            title={game.name} 
            rating={game.metacritic===null?<MdGamepad/>:game.metacritic} 
            genre={game.genres.map(genre=>genre.name+" ")} 
            imglnk={(game.background_image===null)?"":game.background_image}
            gameid={game.id}
            slug={game.slug}
            plat={game.parent_platforms}
            /> : "NO RESULTS FOUND"}
            )}
 </div>

Upvotes: 0

Nishant Bhosale
Nishant Bhosale

Reputation: 251

I would suggest to filter the array first, based on the conditions and then check if the array has length i.e. arr.length !== 0 and if that is the case, then map the results of the array to the card component. And if not then show the message that no data found. You would have to use if/else or ternary operator.

Thanks😊

Upvotes: 0

Related Questions