How can I show a component after item clicked in react js?

Question

So to make things clear and simple :
I have an AddUser Component to be shown on my AdminDash component after clicking my Add User Item, everything is shown on my AdminDash,
My AdminDash contains a SideMenu, SideMenu contains Items, Items contains list of Item let me show you the tree :

1. AddUser.

2. AdminDash:

   • SideMenu:
     • Items:
       1. Item.
       2. Item.
       3. Item.

AdminDash

//Some code
<SideMenu />
//Here where I want to show my addUser Component

SideMenu

//Some code
<Items />

Items

//Some code
<Item Name="addUser" />
<Item Name="deleteUser" />
<Item Name="updateUser" />

Item

<ul>
  <li   
onClick={I WANT TO SHOW MY ADDUSER COMPONENT}
>
    <div> {props.Name} </div>
  </li>
</ul>

AddUser

//Some random code 
<p> this is the add user component</p>

So whenever I click an item like AddUser I want its component to show on my Admin Dash, any hint?

Answer 1

So after a very many tries and long researches, I almost used useContext to do the job, but finally I found the solution, these are the steps :

1. First I added a new component <AdminOptions /> which contains all the logic of rendering my <AddUser /> and <DeleteUser /> and <UpdateUsers /> .
2. I Passed a function through the last child ( <Item /> ) to call it and pass some parameters with, to the parent component which is <AdminDash /> to tell which item is clicked and which to render.
3. Then I used these parameters and pass them again to my new component ` to render that specific item, it's a bit complex and many hierarchy but it's a perfect solution for me.

AdminDash

const[componentId, setComponentId]= React.useState(false);
const [show, setShowComponent] = React.useState(false);

const handleClick=(id)=>{
      if(id===componentId){
        setShowComponent(!show);
      }
      else{
        setComponentId(id);
        setShowComponent(true);
      }
    }
return (
//Here I pass the handleClick hooks to the childs
<SideMenu handleClick={handleClick} />
//my new component who will render the items component
<AdminOptions whatToShow={componentId} show={show}  />
);

SideMenu

//passing again the handleClick to childs
<Items handleClick={props.handleClick} />

Items

//I'm passing again the handleClick and giving each item an ID to differentiate between them 
<Item 
  Name="addUser"
  Id="AddUser"
  handleClick={props.handleClick} />
<Item 
  Name="deleteUser"
  Id="DeleteUser"
  handleClick={props.handleClick} />
<Item 
  Name="updateUser"
  Id="UpdateUser"
  handleClick={props.handleClick} />

Item

<ul>
//here in the onClick i pass the function handleclick with an item id as a parameter
  <li   
onClick={()=>{props.handleClick(props.Id)}}
>
    <div> {props.Name} </div>
  </li>
</ul>

AdminOptions

//So here is a switch case conditional rendering depending on Item's ID
switch (props.whatToShow){
            case "AddUser":
                return(props.show && <AddUser />);
            case "DeleteUser":
                return(props.show && <DeleteUser />);
            case "UpdateUser":
                return(props.show && <UpdateUser />);
            default :
                return (<> </>);

So when I click on Add user item it pass an Id of that specific Item to the parent component(AdminDash) which execute that handleClick with the Id of the item, and make the AdminOptions Show that item Component in the AdminDash, I did my best to make it as clear as possible, anyone who has a question leave it in the comment.