Actualmente tengo un componente Usuario , que representa 2 elementos -> nombre de usuario y avatar . Estoy obteniendo el nombre de usuario y el avatar perfectamente, pero quiero ver solo el nombre de usuario
¿Hay alguna forma de obtener solo el elemento de nombre de usuario ? No con una foto de perfil.
//User component const User = ({ username, profilePic }) => { return ( <React.Fragment> <Avatar name='user' src={profilePic.profile.image} alt="user_image" ml="5"/> <Heading size={'sm'} ml="5">{username.username}</Heading> </React.Fragment> ); }; // Content Page {group.members.map(member => { return <React.Fragment key={member.id}> <User username={member.user} profilePic={member.user}/> </React.Fragment> })}Puede agregar un renderAvatar de apoyo adicional y solo mostrar el avatar si el valor booleano es true con la representación condicional.
const User = ({ username, profilePic, renderAvatar }) => { return ( <React.Fragment> {renderAvatar && <Avatar name='user' src={profilePic.profile.image} alt="user_image" ml="5"/>} <Heading size={'sm'} ml="5">{username.username}</Heading> </React.Fragment> ); };Podrías usarlo así.
<User username={member.user} profilePic={member.user} renderAvatar={false} /> <User username={member.user} profilePic={member.user} renderAvatar={true} /> O simplemente cree un componente que solo represente el Heading .
const UserWithoutAvatar = ({ username }) => { return <Heading size={'sm'} ml="5">{username.username}</Heading> };Una opción sería renderizar condicionalmente en función de si se proporciona o no profilePic . Por ejemplo:
return ( <React.Fragment> { profilePic ? <Avatar name='user' src={profilePic.profile.image} alt="user_image" ml="5"/> : null } <Heading size={'sm'} ml="5">{username.username}</Heading> </React.Fragment> ); Entonces, si simplemente no proporciona profilePic , no estará undefined :
<User username={member.user} />Aparte, el código parece estar generando confusión en torno a la denominación. Por ejemplo:
{username.username} Una propiedad llamada "nombre de usuario" implica que es una cadena que representa el nombre del usuario. Pero en este caso, el nombre de username es un objeto que contiene una propiedad llamada nombre de username . ¿ Esa propiedad contiene una cadena? ¿U otro objeto?
O aquí:
<User username={member.user} profilePic={member.user}/> ¿Qué es member.user ? ¿Es un nombre de usuario? ¿Es una foto de perfil? De alguna manera es ambos?
La claridad es importante. Si lo que realmente está pasando al componente es un objeto de usuario , llámelo así:
<User user={member.user} /> Alternativamente, si el componente espera un valor literal para el nombre de username y un valor literal para profilePic , pásele esos valores:
<User username={member.user.username} profilePic={member.user.profile.image} />No confunda su semántica. La confusión conduce a errores.