How to edit my JSX filter and include an additional conditional?

I have this mapping function that filters and sorts HTML items for me, for this case they sort items in a list.

Sometimes, the filter declares zero items pass the parameter check. When this happens, it would be idela for a specific HTML to show up:

<span> no items pass the filter </span>

However I'm not sure how to build that into my code:

Here is my original mapping function that filters and slices data for presenting. How can I add the conditional to my code below? Is there any way doing on doing so without having to deconstruct my function below?

                     <Grid item>                              <List>                                  {data[2] && sortAll(data[3], 'desc', 'put_call_ratio')                                      .filter((i) => i.ratio > 1.5)                                      .slice(0, 4)                                      .map((stock, index) => (                                          <Grid>                                          <ListItem>                                              ...                                          </ListItem>                                          </Grid>                                      ))                                          }                              </List>                      </Grid>  

The problem with this code above, is that when no items pass the filter, nothing displays.

https://stackoverflow.com/questions/66838269/how-to-edit-my-jsx-filter-and-include-an-additional-conditional March 28, 2021 at 11:57AM