conditional-rendering.jsx

// Option 1
render() {
  return (
    <div className="App">
      <h1>The title</h1>
      {
        this.state.movies.length > 0 && (
          <h1>Movie list</h1>
          <MovieList data={this.state.movies} />
        )
      }

      {
        this.state.comics.length > 0 && (
          <h1>Comic list</h1>
          <ComicList data={this.state.comics} />
        )
      }
    </div>
  );
}

// Option 2
render() {
  if (something) {
    return (
      Something here...
    );
  }
  
  if (!something) {
    return (
      Something here...
    );
  }
}

// Option 3
render() {
  let theElement = null;
  
  if (something) {
    theElement = <Xxx />;
  } else {
    theElement = <Yyy />;
  }

  return (
    <div>
      <Greeting isLoggedIn={isLoggedIn} />
      {theElement}
    </div>
  );
}