conditional-rendering-with-component.jsx

// src/components/Conditional.jsx
const Conditional = (props) => {
  return(
    !!props.if && props.children
  );
}

export default Conditional;

// Implementation:
import Conditional from 'components/Conditional';

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

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