I am facing a challenge in rendering different components based on the navbar text that is clicked. Each onclick event should trigger the display of a specific component, replacing the current one. I have 5 elements with onclick events and would like to render 5 distinct components upon demand. Any assistance would be greatly appreciated!
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;
I'm currently stuck and unable to make any progress.