Issues rendering the right dashboard UI user based on roles

Question

I am trying to render UI in my project based on selected roles (brands, agency, influencer) on click. However, the logic that I am putting together is not loading the right UI and I don't quiet understand why not.

I have tried moving the role and setRole to the top component and passed the props down to the child components that read role and updated it via setRole so that I can have the state to be available in two places.
I also set a logic that should display components based on if the role equals the value of the buttons.
What happened was the components weren't loading upon clicking the function that handles click. However, logging out to the console if the role equals the value of the clicked button returns true, the right string that the logic was based on.
What I am expecting to happen is to load the component e.g: "Brands" when users click and select "brands" which is the value of the clicked button. Vise versa for the other components.

My code is as follows:

import { useState } from 'react';
import { useSession } from 'next-auth/react';
import Brands from './Brands';
import Agency from './Agency';
import CreatorsDash from './CreatorsDashboard';

export default function FirstPageModal({ role: userRole }) {
  const [role, setRole] = useState(userRole);
  const { data: session } = useSession();

  const handleClick = (e) => {
    e.preventDefault();

    let buttonValue = e.target.value;

    const clickedRole = role?.map((user) => {
      let { role } = user;
      if (buttonValue) {
        userRole = { role: buttonValue };
      }

      return { userRole };
    });

    console.log(clickedRole); //Returns an array

    clickedRole.map((item) => {
      const { role } = item.userRole;
      console.log(role); //Returns string ("agency" / "brands" / "Influencer")

      if (session && role === 'brands') {
        console.log(role); //This logs "brands" as expected  but doesn't return the component
        //  return <Brands session={session} role={role} />;
      } else if (session && role === 'agency') {
        return <Agency session={session} role={role} />;
      } else if (session && role === 'Influencer') {
        return <CreatorsDash session={session} role={role} />;
      } else {
        console.log('Select a role');
      }
    });
  };

  return (
    <>
      <div className="">
        <button type="button" className="" onClick={handleClick} value="agency">
          As an Agency
        </button>
        <button type="button" className="" onClick={handleClick} value="brands">
          As a Brand
        </button>
        <button
          type="button"
          className=""
          onClick={handleClick}
          value="Influencer"
        >
          As an Influencer
        </button>
      </div>
    </>
  );
}

score 0 · Answer 1 · answered Nov 03 '22 at 14:57

Returning a component from an onClick handler doesn't automatically render the component. One thing you could do is to keep track of the role in the state and then put the <Brands /> <Agency/> and <CreatorsDash /> components in the render function and dynamically show/hide them like {role === "brands" && <Brands />. This can also be done with css, although the benefits of this are not so clear,.

Side note, it is very helpful to post a codepen with your code, especially as your code gets more complicated

Issues rendering the right dashboard UI user based on roles

1 Answers1