What is the correct way to encapsulate inside a React component?

Question

React

There is a component

return (
<div className={classNames}>
  <img
    className={[classes["user__avatar"]]}
    alt={props.altAvatar}
    src={props.srcAvatar}
  />
  <h1 className={[classes["user__name"]]}>{props.userName}</h1>
  <Button className={[classes["user__logout"]]} onClick={logOut}>
    Logout
  </Button>
</div>

I initialize it in another component with such data

<UserProfile
        className={[classesAppContainer["app__body"]]}
        userName={userProfileName}
        alt={userProfileName}
        src={userProfilePhoto}
      />

The question is, how can I pass data to Alt and Src not outside, but encapsulated?

Answer 1

1. I would try to wrap withUser in HOC or make a hook of the same name
2. In general, this is normal. A normal component that renders what is given to it.
3. Make it smarter so that it receives this data itself. Here it echoes with paragraph 1

Answer 2

context