How to render a component using a conditional statement in reactjs?

This is my example code.

import React, { Component } from "react";
import Navpills from "./Navpills";
import Home from "./pages/Home";
import About from "./pages/About";
import Blog from "./pages/Blog";
import Contact from "./pages/Contact";

class PortfolioContainer extends Component {
  state = {
    currentPage: "Home"
  };

  handlePageChange = page => {
    this.setState({ currentPage: page });
  };

  render() {
    return (
      <div>
        <Navpills
          currentPage={this.state.currentPage}
          handlePageChange={this.handlePageChange}
        />
        Based on `this.state.currentPage`, render the appropriate component
        here.
      </div>
    );
  }
}

export default PortfolioContainer;

The instructions are as follows:

Now add code to PortfolioContainer so that depending on the currently selected page, a different component is rendered underneath the Navpills component. Example:

• Render the About component when this.state.currentPage === "About"

• Render the Blog component when this.state.currentPage === "Blog"

• Render the Contact component when this.state.currentPage === "Contact"

• Render the Home component when this.state.currentPage === "Home"