ReactJS - Best practice to render conditional component-CodePudding

I am quite new to react and like it, but the flexibility gives me some headaches what the best practices are.

For example I have this component, a conditional Login Button.

  const dynamicLogin = () => {
    if (ctx.isLoggedIn) {
      return (
        <button
          className="bg-gray-600 px-8 rounded-lg hover:bg-gray-800"
          onClick={ctx.onLogout}
        >
          Logout
        </button>
      );
    } else {
      return (
        <button
          className="bg-gray-600 px-8 rounded-lg hover:bg-gray-800"
          onClick={ctx.onLogin}
        >
          Login
        </button>
      );
    }
  };

I render it by calling the function is my return statement.

  return (
    <div>
      {ctx.visible ? <Warenkorb></Warenkorb> : ""}

      <nav className="flex justify-between px-4 bg-red-400 text-white text-xl fixed top-0 left-0 w-full">
        <div>
          <h3 className="p-4 inline">
            {ctx.isLoggedIn ? "Eingeloggt!" : "Not Logged In"}
          </h3>
          {dynamicLogin()}
        </div>
        {dynamicWarenkorb()}
...

To be honest, the syntax begins to look quite messi, but it somewhat works. But calling a function inside the return statement feels VERY WRONG. Is the way I render my Components fine or is there a better/faster way to do it. The documentation seems not to be too helpful, because most of the stuff is about class based components :-/.

CodePudding user response：

I think using components is cleaner than functions in instances like this. For example, you could create an AuthButton component as such:

export function AuthButton({ ctx }) {
  if (ctx.loggedIn) {
    return (
      <button
        className="bg-gray-600 px-8 rounded-lg hover:bg-gray-800"
        onClick={ctx.onLogout}
      >
        Logout
      </button>
    );
  }
  
  return (
    <button
      className="bg-gray-600 px-8 rounded-lg hover:bg-gray-800"
      onClick={ctx.onLogin}
    >
      Login
    </button>
  );
}

Then you can call it in your other component:

import { AuthButton } from './AuthButton';

function OtherComponent() {
  return (
    <div>
      {ctx.visible ? <Warenkorb></Warenkorb> : ""}

      <nav className="flex justify-between px-4 bg-red-400 text-white text-xl fixed top-0 left-0 w-full">
        <div>
          <h3 className="p-4 inline">
            {ctx.isLoggedIn ? "Eingeloggt!" : "Not Logged In"}
          </h3>
          <AuthButton ctx={ctx} />
        </div>
        {dynamicWarenkorb()}
      </nav>
      ...
    </div>
  );
}

CodePudding user response：

This is how you can do it, you can place the following piece of code right where you called the function and get rid of the rest

{ctx.isLoggedIn ? (
        <button
          className="bg-gray-600 px-8 rounded-lg hover:bg-gray-800"
          onClick={ctx.onLogout}
        >
          Logout
        </button>
) : (
       <button
          className="bg-gray-600 px-8 rounded-lg hover:bg-gray-800"
          onClick={ctx.onLogin}
        >
          Login
        </button>
)}