I have a users list that im mapping over in a little side bar. Theres a possiblity that there can be no users. So I would like the side bar to say none if theres no users. I tried the below method but it seems like its still registering the user, even if its 0. I've tried (user === null) and (user.length < 1) but just cant seem to get it.
{usersList.map((user) => {
if (!user) {
return <h5>none</h5>;
} else {
return (
<h5
key={user}
>
<Link
to={`/user/${user}`}
style={{ textDecoration: "none"}}
>
{user}
</Link>
</h5>
);
}
})}
Check if the array length is greater than 0: if so, display the list, otherwise display "none"
You can do this with a simple ternary operator:
condition ? truthy : falsey
{usersList.length > 0 ? (
usersList.map((user) => (
<h5 key={user}>
<Link to={`/user/${user}`} style={{ textDecoration: "none" }}>
{user}
</Link>
</h5>
))
) : (
<h5>none</h5>
)}
You can use the ternary operator:
{
userList?.length > 0 ? <h5
key={user}
>
<Link
to={`/user/${user}`}
style={{ textDecoration: "none"}}
>
{user}
</Link>
</h5> :
<h5>No Users</h5>
}
or can use &&
{(!userList || userList?.length === 0) && <h5>No Users</h5>}
{userList?.length > 0 && <h5
key={user}
>
<Link
to={`/user/${user}`}
style={{ textDecoration: "none"}}
>
{user}
</Link>
</h5>}