Tengo una lista de usuarios que estoy mapeando en una pequeña barra lateral. Existe la posibilidad de que no haya usuarios. Así que me gustaría que la barra lateral diga ninguno si no hay usuarios. Probé el siguiente método, pero parece que todavía está registrando al usuario, incluso si es 0. Lo intenté (user === null) y (user.length < 1) pero parece que no puedo obtenerlo.
{usersList.map((user) => { if (!user) { return <h5>none</h5>; } else { return ( <h5 key={user} > <Link to={`/user/${user}`} style={{ textDecoration: "none"}} > {user} </Link> </h5> ); } })}Compruebe si la longitud de la matriz es mayor que 0: si es así, muestre la lista; de lo contrario, muestre "ninguno"
Puedes hacer esto con un simple operador ternario:
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> )}Puedes usar el operador ternario:
{ userList?.length > 0 ? <h5 key={user} > <Link to={`/user/${user}`} style={{ textDecoration: "none"}} > {user} </Link> </h5> : <h5>No Users</h5> }o puede usar &&
{(!userList || userList?.length === 0) && <h5>No Users</h5>} {userList?.length > 0 && <h5 key={user} > <Link to={`/user/${user}`} style={{ textDecoration: "none"}} > {user} </Link> </h5>}