Как визуализировать различные компоненты onClick? (Компонент должен быть заменен новейшим обработчиком щелчка.)

Учитывая, что вы используете строку содержимого элемента, вы можете реорганизовать свое представление следующим образом:

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"
        };
        this.getComponent = this.getComponent.bind(this);
    }

    getComponent(event) {
        this.setState({ component: event.target.textContent })
    }

  render() {
    const component = this.state.component;
    let renderComponent = null; // declare a null variable that will contain the component

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

    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>

        {/* Use the variable here */}
        {renderComponent} 

      </div>
    );
  }
}

export default App;

Если ваша навигация имеет элементы, отличные от текста, она не будет работать. Рассмотрите возможность использования функции onClick, дающей параметр с именем компонента:

<h1 className = "navlink" onClick = {() => this.getComponent('About')}>
    {/* Won't work with the previous example, as it contains another html element */}
    <i className='fa fa-info' /> About
</h1>

а затем в функции getComponent:

getComponent(componentName) {
    this.setState({ component: componentName })
}

Подумайте также о том, чтобы дать функции более описательное имя, чтобы было легче понять, что она делает (установив имя компонента в состояние):

setViewComponentName(componentName) {
    this.setState({ component: componentName })
}