# Component Composition — Storybook

Source: https://www.geekswithgeeks.com/hi/storybook/sb-component-composition

> Storybook में components को compose करना सीखें और complex component hierarchies को test करें।

## Stories में components को compose करना

आप एक story में कई components को एक साथ compose कर सकते हैं कि वे कैसे interact करते हैं। यह parent-child relationships और data flow को test करने के लिए विशेष रूप से उपयोगी है।

## List component को compose करना

यहाँ बताया गया है कि List component को Item children के साथ कैसे test करें।

```tsx
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 />;
```

## Data flow को test करना

Stories आपको test करने देते हैं कि components कैसे different data, callbacks, और state changes को handle करते हैं बिना full application चलाए।

## Over-composition से बचें

Composed stories को simple और focused रखें। अगर एक story बहुत complex हो जाता है, इसे छोटे components में तोड़ दें।