Returning null instead of a JSX when looping through arrays in react using map

Question

I am looping through an array of objects in react using array.map. The array takes the form:

const seasons = [
             {air_date: null, episode_count: 6},
             {air_date: "2020-02-02", episode_count: 6}
           ]

I am looping through the array using seasons.map, returning JSX if air_date is not null and null otherwise.

 seasons.map((season, index) => {
      if(season.air_date){
         return <span key = {season.id}> {season.episode_count} </span>
     }else{
        return null; // Is this recommended?
    }  
})

I have never seen anyone do this (returning null instead of JSX). Is it recommended in react? I don't want to use a for loop.

How come you didn't see that? It's the most common way to map an array in jsx. — k-wasilewski
– k-wasilewski, Commented Jul 25, 2020 at 13:04
I have ever seen map being used to loop through arrays. What i have never seen is null being returned instead of JSX. — nibble
– nibble, Commented Jul 25, 2020 at 13:08
Because there are other options. Probably this is why you don't see something like this. A logical && is necessary for your needs for example. You don't even need to use an if/else statement like that. — devserkan
– devserkan, Commented Jul 25, 2020 at 13:14

Dancrumb · Accepted Answer · 2020-07-25 13:08:04Z

10

Yes, this is recommended.

If you have a conditional or optional component then returning null to mean "no component" or "no JSX" is the way to go.

In addition, as @k-wasilweski says, using a .map to convert an array into a series of components is standard practice in React.

If you don't like the idea of returning nulls, you could always add a .filter(c => c !== null) at the end, but it's really unnecessary.

answered Jul 25, 2020 at 13:08

Dancrumb

27.7k10 gold badges79 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Talmacel Marian Silviu · Accepted Answer · 2020-07-25 13:18:49Z

3

Thats quite okay, but in React its more common to do it using the ternary operator:

seasons.map((season, index) =>
  season.air_date ? <span key={season.id}> {season.episode_count} </span> : null
);

And like @devserkan mentioned in the comment below, you can even just do:

seasons.map((season, index) =>
  season.air_date && <span key={season.id}> {season.episode_count} </span>
);

edited Jul 25, 2020 at 13:18

answered Jul 25, 2020 at 13:11

Talmacel Marian Silviu

1,7762 gold badges10 silver badges15 bronze badges

4 Comments

devserkan Over a year ago

Not even a ternary is needed here. && also works fine.

Talmacel Marian Silviu Over a year ago

true I added your suggestion to the comment.

nibble Over a year ago

Thanks for the feedback. I know about && and ternary operator. I chose if else because of the many lines of JSX i am returning. Use of if elsein this case makes the code more readable compared to && and ternary operator. The example is a simplified version of what i was trying to do.

Talmacel Marian Silviu Over a year ago

no, thats not what I mean't, the span should only render when season.air_date is not null

Collectives™ on Stack Overflow

Returning null instead of a JSX when looping through arrays in react using map

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related