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 :-/.
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>
);
}
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>
)}