CODEWITHSUNDEEP
reactjscomponents
Agustin Castro
Agustin Castro

Reputation: 459

react component vs container

I'm new to react and I'm trying to separate the component. Are the following examples containers or components? For me both are components but I'm not sure because they have Link tag and Route tag.

Page.jsx

<main role="application">
      <Switch>
        {/* Home */}
        <Route path="/" exact component={Home} />
        {/* Profile */}
        <Route path="/user/:id" exact component={Profile} />
        {/* Error 404 */}
        <Route component={Error404} />
      </Switch>
    </main>

User.jsx:

function User(props) {
  return (
    <div id={`user-${props.id}`}>
      <Link to={`/user/${props.id}`}>
        {props.name}
      </Link>
      <p>{props.email}</p>
    </div>
  );
}

User.propTypes = {
  id: PropTypes.number.isRequired,
  name: PropTypes.string.isRequired,
  email: PropTypes.string.isRequired,
};

export default User;

Upvotes: 0

Views: 2149

Answers (2)

Saad Bilal
Saad Bilal

Reputation: 1837

Component is part of the React API. A Component is a class or function that describes part of a React UI.

Container is an informal term for a React component that is connect-ed to a redux store. Containers receive Redux state updates and dispatch actions, and they usually don't render DOM elements; they delegate rendering to presentational child components.

Upvotes: 0

Jason Xu
Jason Xu

Reputation: 885

I think you may want to know the concept of presentational and container components in React. Your two examples both are presentational components, since they just use the props they receive to render their looks. They don't care how to get the correct props data. In contrast to presentational components, container components care about how things work. They should be responsible for the business logics while presentational components are only concerned about the UI logics of themselves. This is an detailed explanation.

Upvotes: 1

Related Questions