Render JSX-element with .map() only if certain property of source object is not null

Question

 <h1>Trending today</h1> <ul> {this.state.trendingMovies.map((movie) => ( <li key={movie.id}> <NavLink to={`/movies/${movie.id}`} className="movie-link"> {movie.title} </NavLink> </li> ))} </ul>

Here's what I got. Right now, I am rendering the whole array - but I need to render {movie.title} is not null. Please help me with writing a ternary.

You could either return null from the map function when you do not wish to render anything, or subset the array before the map function using the filter function. — Jacob Smit
– Jacob Smit, Commented Jul 27, 2020 at 21:55

dave · Accepted Answer · 2020-07-27 21:55:22Z

Just filter them out first:

this.state.trendingMovies.filter(movie => movie.title).map(...

or if you really want it only if it's not null (empty string is OK):

this.state.trendingMovies.filter(movie => movie.title !== null).map(...

Yevhen Horbunkov · Accepted Answer · 2020-07-27 22:53:38Z

Considering null/undefined/false are ignored by renderer, you may use Array.prototype.map() with short-circuited &&(which will be even more compact than ternary) to return either false or <li> JSX, based on desired condition, so you won't need to do extra loop for .filter():

{this.state.trendingMovies.map((movie) => !!movie.title && ( <li key={movie.id}> <NavLink to={`/movies/${movie.id}`} className="movie-link"> {movie.title} </NavLink> </li> ))}

Collectives™ on Stack Overflow

Render JSX-element with .map() only if certain property of source object is not null

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related