I am trying to render different Components based on what navbar text I click on. Rendering the component would replace the current one. I have 5 onclick element I want to use and render 5 different components on demand. Please Help!!

Language Help React.js
1 
import Sidenav from "./components/ButtonAppBar";
import AboutTab from "./components/About";
import QuoteTab from "./components/Quote";
import ProductTab from "./components/Quote";
import CalendarTab from "./components/Quote";
import ContactTab from "./components/Quote";
import "./App.css";


class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      component: "About"
    };
  }

  var component = this.state.component;

switch(component) {
  case "Contact":
    return <ContactTab />;
    break;
  case "Quote":
    return <QuoteTab />;
    break;
  default:
    return <AboutTab />;
}

  render() {
    return (
      <div>
        <Sidenav>
          <h1 className="navlink" onClick={this.getComponent}>
            About
          </h1>
          <h1 className="navlink" onClick={this.getComponent}>
            Quote
          </h1>
          <h1 className="navlink" onClick={this.getComponent}>
            Schedule
          </h1>
          <h1 className="navlink" onClick={this.getComponent}>
            Products
          </h1>
        </Sidenav>
        <AboutTab />
        <QuoteTab />
      </div>
    );
  }
}

export default App;