Lesson 4 / 25

Component Composition

Compose parent and child components in stories to test data flow and keep complex component hierarchies easy to review.

Composing components in stories

You can compose multiple components together in a story to test how they interact. This is especially useful for testing parent-child relationships and data flow.

Composing a list component

Here's how to test a List component with Item children.

import { List, ListItem } from './List';

export default {
  component: List,
  title: 'Components/List',
};

export const WithItems = () => (
  <List>
    <ListItem>First item</ListItem>
    <ListItem>Second item</ListItem>
    <ListItem>Third item</ListItem>
  </List>
);

export const Empty = () => <List />;
export const Loading = () => <List loading />;

Testing data flow

Stories allow you to test how components handle different data, callbacks, and state changes without running the full application.

Avoid over-composition

Keep composed stories simple and focused. If a story becomes too complex, break it into smaller components.