React Conditional Rendering

Question

I'm trying to figure out conditional rendering in React. If there are no movies in the user's watchlist, i just want to output a title. I thought somethin like this would work:

render() {
    return (
        <Container>
            {this.state.watchlist.map(item => {
                if(this.state.watchlist.length > 0) {
                    return (
                        <WatchlistMovie
                            className="watchlist-movie"
                            key={item.id}
                            id={item.id}
                            title={item.title}
                            poster={item.poster}
                            overview={item.overview}
                            rating={item.rating}
                            user={this.props.user}
                        />
                    );
                } else {
                    return <h1>no movies</h1>
                }
            )}}
        </Container>
    );
}

I believe you want the if-else logic outsides of the map — Yury Tarabanko
– Yury Tarabanko, Commented Mar 20, 2019 at 14:39
@Vencovsky No errors, just dont get the <h1> tag displayed if there are no movies in the watchlist — juicy j
– juicy j, Commented Mar 20, 2019 at 14:42
What is the <Container /> in your application? Is it set up to display this.props.children? — Jacob Bralish
– Jacob Bralish, Commented Mar 20, 2019 at 15:25
<Container> is a component from react-bootstrap <Container/> read more about it here: react-bootstrap.github.io — juicy j
– juicy j, Commented Mar 20, 2019 at 15:36

Yury Tarabanko · Accepted Answer · 2019-03-20 14:42:16Z

5

I believe you want the if-else logic outsides of the map

  <Container>
    {this.state.watchlist.length === 0 && <h1>no movies</h1>}

    {this.state.watchlist.map(item => (<WatchlistMovie
      className="watchlist-movie"
      key={item.id}
      id={item.id}
      title={item.title}
      poster={item.poster}
      overview={item.overview}
      rating={item.rating}
      user={this.props.user}
    />))}

  </Container>

answered Mar 20, 2019 at 14:42

Yury Tarabanko

45.1k10 gold badges88 silver badges99 bronze badges

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

3 Comments

juicy j Over a year ago

i get the logic of your answer, but it still seems not to be working for me, and i get no errors. If i check the React Dev tools, i can see the <h1> tag, however its greyed out.

Yury Tarabanko Over a year ago

@juicyj Then the problem is somewhere else. Because the second operand of && would only be executed if the first it truthy (which is of course not in case of an empty array)

juicy j Over a year ago

got it, seems like bootstrap was being weird and hiding my element, thanks again Yury!

Jolly · Accepted Answer · 2019-03-20 14:50:12Z

2

There's a problem in your code, which is that you check this.state.watchlist.length > 0 inside this.state.watchlist.map, and that you want to display the h1 element when the length is equal to 0.
The problem is that map() function iterates over all the elements of an array, and, if the array is empty, no callback is executed.

Thus, in your case, when this.state.watchlist.length is equal to 0, you don't even enter the map() function, so you can't render the h1 element at all.

As many user suggested, you should change your render method:

render() {
    const movieCounter = this.state.watchlist.length;
    return (
        <Container>
            {movieCounter === 0
                ? <h1>no movies</h1>
                : this.state.watchlist.map(item =>
                    <WatchlistMovie
                        className="watchlist-movie"
                        key={item.id}
                        id={item.id}
                        title={item.title}
                        poster={item.poster}
                        overview={item.overview}
                        rating={item.rating}
                        user={this.props.user}
                    />
                )}
            }
        </Container>
    );
}

In this example, what is happening is that you check if movieCounter is equal to 0: in that case, you display the h1 element, otherwise you iterate over all the films and display a WatchlistMovie Component for each one of them.

answered Mar 20, 2019 at 14:50

Jolly

1,7883 gold badges22 silver badges46 bronze badges

4 Comments

juicy j Over a year ago

i get this logic as well, however just like with Yurys answer it seems to not be working for me either, and i get no errors. If i check the React Dev tools, i can see the <h1> tag, however its greyed out.

Jolly Over a year ago

Can you explain me better what you mean with "greyed out"? Anyways, can you also post the Container implementation?

Jolly Over a year ago

You're welcome. Though, try to explain what was the problem: some other users may end up in this question and need your answer too :)

juicy j Over a year ago

My issue was that React-Bootstrap was hiding my element off the page for some reason, i just had to add margin top so the title was visible on my webpage. Both your code and Yury's worked flawlessly! thanks again :D

aditya81070 · Accepted Answer · 2019-03-20 14:43:14Z

1

You can use what we call short circuit evaluation for conditional rendering in React.

render() {
return (
  <Container>

    {this.state.watchlist.length > 0 && (this.state.watchlist.map(item => {
      <WatchlistMovie
        className="watchlist-movie"
        key={item.id}
        id={item.id}
        title={item.title}
        poster={item.poster}
        overview={item.overview}
        rating={item.rating}
        user={this.props.user}
      />)}
    {this.state.watchlist.length === 0 && (
       <h1>no movies</h1>)
     }
  </Container>

);
}
}

In this type of expression if the first condition is true then the component will after it will be rendered otherwise it will be ignored

answered Mar 20, 2019 at 14:43

aditya81070

7361 gold badge6 silver badges24 bronze badges

Comments

Vencovsky · Accepted Answer · 2019-03-20 14:44:57Z

0

There is alot of ways to do this, this example shows how to do it using ternary. I think this is a better looking and smallert code, but you can also use Yury Tarabanko answer that do the same

render() {
    return (
      <Container>
        {this.state.watchlist.length > 0 ?
            this.state.watchlist.map(item => 
                <WatchlistMovie
                    className="watchlist-movie"
                    key={item.id}
                    id={item.id}
                    title={item.title}
                    poster={item.poster}
                    overview={item.overview}
                    rating={item.rating}
                    user={this.props.user}
                />
            })
            :
            <h1>no movies</h1>            
        }
      </Container>

    );
  }
}

answered Mar 20, 2019 at 14:44

Vencovsky

32.1k25 gold badges132 silver badges202 bronze badges

1 Comment

juicy j Over a year ago

Thanks for your quick response!

Collectives™ on Stack Overflow

React Conditional Rendering

4 Answers 4

3 Comments

4 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

4 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related