React component. Render specific element

Currently I’ve a component User, which renders 2 element -> username and avatar.
I’m getting the username and avatar perfectly, but I want to view only the username only

Is there any way to fetch only the username element ? Not with a profile picture.

//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>
 })}

>Solution :

You could add an extra prop renderAvatar and only display the avatar if the boolean is true with conditional rendering.

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>
  );
};

You could use it like this.

<User username={member.user} profilePic={member.user} renderAvatar={false} />
<User username={member.user} profilePic={member.user} renderAvatar={true} />

Or just create a component that only renders the Heading.

const UserWithoutAvatar = ({ username }) => {
  return <Heading size={'sm'} ml="5">{username.username}</Heading>
};