Suggest an edit

Improve this article

Refine the answer for “What is a "presentational component"?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## Short definition

A **presentational component** is a component that is **responsible only for the appearance (UI)** and **contains no business logic or application state**.

In other words:

> This is a "dumb" component that simply **receives data via** `props` and **renders it as JSX**.

---

## Difference from a container component

| Characteristic | Presentational (UI) | Container (Logic) |
|---|---|---|
| Main task | Displaying data | Managing data |
| Where data is stored | In props | In state, context, or the store |
| State | Almost never | Usually present |
| Logic (fetch, filters, handlers) | No | Yes |
| Connection to the server | No | Yes |
| Reusability | Very high | Limited by context |
| Example | UserCard, Button, Header | UserContainer, ProductsContainer |

---

## Example 1. A simple presentational component

```javascript
function UserCard({ name, email }) {
  return (
    <div className="user-card">
      <h3>{name}</h3>
      <p>{email}</p>
    </div>
  );
}
```

Features:

- No state (useState).
- No side effects (useEffect).
- Only displays data.
- Receives everything via props.

Usage:

```javascript
<UserCard name="Tim" email="tim@example.com" />
```

---

## Example 2. Separating the container from the presentational component

```javascript
function UserContainer() {
  const [user, setUser] = useState(null);

useEffect(() => {
    fetch("/api/user")
      .then(res => res.json())
      .then(setUser);
  }, []);

if (!user) return <p>Loading...</p>;

return <UserCard name={user.name} email={user.email} />;
}
```

Here:

- UserContainer -> logic (fetch, state);
- UserCard -> presentation (markup, styles).

This separation keeps the code clean and reusable.

---

## Example 3. A presentational component with children

```javascript
function Card({ title, children }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div>{children}</div>
    </div>
  );
}
```

Usage:

```javascript
<Card title="Profile">
  <UserCard name="Anya" email="anya@example.com" />
</Card>
```

The Card component doesn't know exactly what's inside; it's simply responsible for the structure and style.

---

## Example 4. A presentational component as a UI library

Most UI components (for example, from shadcn/ui, Material UI, Chakra UI) are presentational components.

Examples:

```javascript
<Button variant="primary">Submit</Button>
<Alert type="error">Error!</Alert>
<Modal isOpen>Content</Modal>
```

None of them manage data state; they simply render what was passed to them.

---

## Example 5. Minimal logic inside

Sometimes minimal UI logic is allowed, for example:

- highlighting the selected element;
- toggling classes;
- local UI effects (hover, active, collapse, etc.).

```javascript
function ToggleButton({ active, label }) {
  return (
    <button className={active ? "btn-active" : "btn"}>
      {label}
    </button>
  );
}
```

This is still "presentational": no state, just a reaction to props.

---

## Why this approach matters

**Separation of concerns:** logic is separate, presentation is separate.

**Reusability:** the same UI component can be used in different places.

**Easy testing:** you can simply verify that it renders the correct JSX for the data.

**Clean code:** presentational components do not "weigh down" the application's logic.

---

## Summary

| What it is | A component that only displays data |
|---|---|
| Where it stores data | In props |
| Has state | No (almost never) |
| Where it's used | Inside container or other UI components |
| What it contains | JSX, styles, children |
| Main goal | Separate the visual part from the logical part |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts531 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.