Question 73278 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Conditional Rendering in Tailwind – Reactjs

I am using React and Tailwind. I am trying to conditionally render navbar elements based on whether a user is logged in or not. The items show in the navbar but they do not change based on whether the user is logged in or not.

export default function Navigation() {
  const user = auth.currentUser;
  const [isLoggedIn, setIsLoggedIn] = useState("");

  //Trying something
  let links = [
    { name: "Signup", link: "#", show: !isLoggedIn },
    { name: "Signin", link: "#", show: !isLoggedIn },
    { name: "Logout", link: "#", show: isLoggedIn },
    { name: "Profiles", link: "#" },
    { name: "Contact", link: "#" },

useEffect(() => {
    const unsubscribe = onAuthStateChanged(
      auth,
      (user) => {
        console.log(user);
        if (user) {
          setIsLoggedIn(true);
        } else {
          setIsLoggedIn(false);
        }
      },
      []
    );

    return unsubscribe;
  }, []);

return (<ul>
                {links.map((link) => {
                  return (
                    <li key={link.name}>
                      <a
                        href={link.link}
                        className={`p-2 ${
                          link.show && (link.show ? "" : "hidden")
                        }`}
                        aria-current="page"
                      >
                        {link.name}
                      </a>
                    </li>
                  );
                })}
              </ul>)
Tags:

2

Answers


  1. 0

    Because you have added link.show && ... , the second part will only be executed if link.show is true. So, the hidden class is never applied to the links. You can fix it by changing the following:

    // link.show && (link.show ? "" : "hidden")
!link.show && "hidden"
// or to the following
link.show ? "" : "hidden"

    Checkout Short-circuit evaluation

    Login or Signup to reply.
  2. 0

    2 things to keep in mind:

    1. Initial state of isLoggedIn is "", It should be true or false instead

      const [isLoggedIn, setIsLoggedIn] = useState(false);

    2. Try adding auth object in the dependency array of useEffect hook, to listen to changes in the user’s authentication status.

      useEffect(() => {
 const unsubscribe = onAuthStateChanged(
   auth,
   (user) => {
     console.log(user);
     if (user) {
       setIsLoggedIn(true);
     } else {
       setIsLoggedIn(false);
     }
   },
   [auth]
 );

 return unsubscribe;
}, [auth]);

    Final, updated code:

    export default function Navigation() {
  const user = auth.currentUser;
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  let links = [
    { name: "Signup", link: "#", show: !isLoggedIn },
    { name: "Signin", link: "#", show: !isLoggedIn },
    { name: "Logout", link: "#", show: isLoggedIn },
    { name: "Profiles", link: "#" },
    { name: "Contact", link: "#" },
  ];

  useEffect(() => {
    const unsubscribe = onAuthStateChanged(
      auth,
      (user) => {
        console.log(user);
        if (user) {
          setIsLoggedIn(true);
        } else {
          setIsLoggedIn(false);
        }
      },
      [auth]
    );

    return unsubscribe;
  }, [auth]);

  return (
    <ul>
      {links.map((link) => {
        return (
          <li key={link.name}>
            <a
              href={link.link}
              className={`p-2 ${link.show ? "" : "hidden"}`}
              aria-current="page"
            >
              {link.name}
            </a>
          </li>
        );
      })}
    </ul>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search