CODEWITHSUNDEEP
reactjs
Bunny
Bunny

Reputation: 646

How do I click button to change component in this scenario

enter image description here

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;

Upvotes: 0

Views: 108

Answers (2)

Abreham
Abreham

Reputation: 455

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 :).

Upvotes: 1

Jedupont
Jedupont

Reputation: 437

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

Upvotes: 0

Related Questions