Passing component to another component, props doesn't show up

I'm trying to pass the 'Username' component directly into the 'Comment' component, like I did with the 'ProfilePicture' component, but only the '@' symbol shows up and not the username. Please help, also thanks in advance!

//component
const ProfilePicture = (props) => {
  return (
    <div>
      <img
        className="ProfilePicture"
        src={props.user.pfpUrl}
        alt={props.user.name}
        height={50}
        width={50}
        />
    </div>
  )
};

// username component
const Username = (props) => {
  return (
    <div>
      <p>@{props.user.username}</p>
    </div>
  )
};

// user's comment
const comment = {
  username: "guest",
  image: {
    name: "Default Profile Image",
    pfpUrl: 'https://static.vecteezy.com/system/resources/thumbnails/009/292/244/small/default-avatar-icon-of-social-media-user-vector.jpg'
  }
}


const Comment = (props) => {
  return (
    <div>
      <ProfilePicture user={props.image} />
      <Username user={props.username} />
    </div>
  )
}

ReactDOM.render(
  <Comment image={comment.image} username={comment.username} />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root">
    <!-- This element's contents will be replaced with your component. -->
</div>

CodePudding user response：

You need to access it like props.user in your Username component

//component
const ProfilePicture = (props) => {
  return (
    <div>
      <img
        className="ProfilePicture"
        src={props.user.pfpUrl}
        alt={props.user.name}
        height={50}
        width={50}
        />
    </div>
  )
};

// username component
const Username = (props) => {
  return (
    <div>
      <p>@{props.user}</p> // YOU are passing user as a prop to username component
    </div>
  )
};

// user's comment
const comment = {
  username: "guest",
  image: {
    name: "Default Profile Image",
    pfpUrl: 'https://static.vecteezy.com/system/resources/thumbnails/009/292/244/small/default-avatar-icon-of-social-media-user-vector.jpg'
  }
}


const Comment = (props) => {
  return (
    <div>
      <ProfilePicture user={props.image} />
      <Username user={props.username} />
    </div>
  )
}

ReactDOM.render(
  <Comment image={comment.image} username={comment.username} />,
  document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root">
    <!-- This element's contents will be replaced with your component. -->
</div>

CodePudding user response：

Change the <Username> in your Comment component to read:

<Username user={{username:props.username}} />

This matches the way you are retrieving the username later.