> ## Documentation Index
> Fetch the complete documentation index at: https://docs.baenninger.me/llms.txt
> Use this file to discover all available pages before exploring further.

# Komposition

<AccordionGroup>
  <Accordion title="Komposition">
    Verschiedene Komponenten miteinander kombinieren, indem wir das [`children`-Prop ](/web/react/props/children)oder ein anderes definiertes Prop nutzen.
  </Accordion>
</AccordionGroup>

Mit Komposition können wir:

1. Gut wiederverwendbare und flexible Komponente erstellen
2. Das Problem von [Prop Drilling](/web/react/komposition-und-reusability/prop-drilling) lösen

## Beispiel

Unser Ziel ist es ein Modal zu haben, welches verschiedene Status anzeigen kann, z.B. `Success` oder `Error`:

```jsx theme={null}
const modal = ({ children }) {
  return (
    <div className="modal">
      {children}
    </div>
  )
} 
```

Nun können wir andere Komponenten als dieses Child einfügen, um das Modal wiederzuverwenden:

```jsx theme={null}
<Modal>
  <Success />  
</Modal>

<Modal>
  <Error />  
</Modal>
```