How do I click button to change component in this scenario - reactjs

Question

Hello, I don't know how to change component when clicking on the button on the left side, so it'll render the component into the right side, but only the one that I want, not all of it, I know how to clicking component, it'll transfer me into another route using Switch, etc but this doesn't seem like the case. Can someone help me out?
I can't figure out how to keep the button at the left side stay while the right side component is changing
Here are my code:
import { Component } from "react";
import UserManagement from "../UserManagement/index";
import RoleManagement from "../RoleManagement/index";
import QuizManagement from "../QuizManagement/index";
class Admin extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div class="admin-section">
<div class="admin-control col-25">
/- 3 buttons for 3 components I want to render
<button>
<label>User management</label>
</button>
<button>
<label>Role management</label>
</button>
<button>
<label>Quiz management</label>
</button>
</div>
<div class="admin-modify col-75">
/- When I click button the component will display here, I just don't know how to parse it into here but only one, if it like this it'll render all 3 of it.
<UserManagement />
<RoleManagement />
<QuizManagement />
</div>
</div>
);
}
}
export default Admin;

Answer 1

A simple solution would be:
Step 1 : Add a state called management in this.state = {}. Like
constructor(props) {
super(props);
// you can default this to any of the three
this.state = {management: "user"};
}
Step 2: Add onClick handler on the buttons like
<button onClick={() => {this.setState({management: "user"}) }}>
<label>User management</label>
</button>
<button onClick={() => {this.setState({management: "role"}) }}>
<label>Role management</label>
</button>
<button onClick={() => {this.setState({management: "quiz"}) }}>
<label>Quize management</label>
</button>
Step 3: Conditionally render your tables based on the state.
{this.state.managment === "user" && <UserManagement />}
{this.state.managment === "role" && <RoleManagement />}
{this.state.managment === "quiz" && <QuizManagement />}
Step 4: Turn up :).

Answer 2

Have you tried to simply hide/show the right component when listening to the user's "onClick" event on the left component?