react component vs container

Question

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;

Jason Xu · Accepted Answer · 2017-06-21 02:26:22Z

1

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.

answered Jun 21, 2017 at 2:26

Jason Xu

8859 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ben Hare Over a year ago

And just as an addendum, your references to "component" or "container" map to these "presentation" and "container" components.

Saad Bilal · Accepted Answer · 2020-12-09 10:36:51Z

0

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.

answered Dec 9, 2020 at 10:36

Saad Bilal

1,8571 gold badge20 silver badges31 bronze badges

Collectives™ on Stack Overflow

react component vs container

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related