> ## 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.

# Props

Props werden genutzt, um Daten von einer **Parent-Komponente zu einer Child-Komponente** zu übergeben. Es ist ein essenzielles Tool, um Komponenten zu **konfigurieren** und **anzupassen**. Mit Props **kontrollieren** Parent-Komponenten wie Child-Komponenten aussehen und funktionieren.

**Alles Mögliche** kann als Props übergeben werden: Strings, Arrays, Objekte, Funktionen, sogar andere Komponenten.

## Props übergeben

Die Daten übergeben wir einfach über ein Attribut unserer Komponente:

```jsx theme={null}
<Pizza
  name="Pizza Spinaci"
  ingredients="Tomato, mozarella, spinach, and ricotta cheese"
  photoName="pizzas/spinaci.jpg"
  price={12}
/>
```

## Props annehmen

In unserer Child-Komponente können wir ein Parameter namens `props` annehmen.

```jsx theme={null}
const Pizza = (props) => {
  return (
    <div>
      <img src={props.photoName} alt={props.name} />
      <h3>{props.name}</h3>
      <p>{props.ingredients}</p>
    </div>
  );
}

export default Pizza;
```

<Info>
  Wenn wir mit TypeScript arbeiten müssen wir noch den Typ für die Props definieren.
</Info>

## Prop-Types

Mit Prop-Types können wir Props validieren und Fehler abfangen. Prop-Types ist eine Library die wir zuerst installieren müssen:

```bash theme={null}
npm install -D prop-types
```

Danach können wir unsere Props wie folgt definieren:

```jsx theme={null}
Pizza.propTypes = {
  pizza: PropTypes.shape({
    name: PropTypes.string.isRequired,
    ingredients: PropTypes.string.isRequired,
    price: PropTypes.number.isRequired,
    photoName: PropTypes.string.isRequired,
    soldOut: PropTypes.bool.isRequired,
  }).isRequired,
};
```

Für mehr Informationen konsultiere die [offizielle Dokumentation](https://www.npmjs.com/package/prop-types?activeTab=readme).