Real quick, I have two components I want to render(show) based on the role of login status, if it's an admin then I want to display the admin UI or else if it's a user, display the user UI.
How do I do this?
Hello my dear reader, welcome to today's post where I'll be teaching the tricks and tips to solve the problem above. Enjoy you stay reading the post 📯.
When you have components you want to conditionally render, React has a way of helping you achieve that. Let's see it in action.
Let's use the problem above as an example. Say we have Admin & User components.
...
{
return ({user && user.role ===
"Admin" ? <Admin /> : <User />})
}
So what's going on here. If a user is logged in, he's either having a role of User or Admin. Now we checked if there's a user, if there's one, check for the role and display the corresponding UI.
What about a situation where it's just a component you want to render?
Let's take a scenario where you want to display an error if password attempt's more than 3 times.
Simply do this in your return block:
Assume you have a variable called attempt holding the number of times the user tried logging in, and a component called ErrorToast that will display the error.
return({attempt >= 3 ? <ErrorToast /> : null})
Here we are saying if the attempt is 3 times already, display the error if not, do nothing.
Or the easier way
return({attempt >= 3 && <ErrorToast />})
And that's all for now.
If you did learn something, kindly share and give it a like 😉
Top comments (0)