Props

Einführung in Props

Props werden als Attribute im JSX-Aufruf gesetzt und als Objekt-Parameter der Komponenten-Funktion empfangen. Per Konvention heißt dieser Parameter props.

const Greeter = (props) => {
    return <p>Hi, {props.name}</p>;
};

export default Greeter;

Verwendung:

<Greeter name="Max" />
<Greeter name="Anna" />

Beide Aufrufe nutzen dieselbe Komponente — mit unterschiedlicher Konfiguration. Genau dieses Pattern macht Komponenten so mächtig.

Destructuring im Parameter

In der Praxis wird der props-Parameter fast immer direkt destructured — die einzelnen Eigenschaften werden ausgepackt und stehen als Variablen zur Verfügung.

const User = ({ name, age, isActive }) => {
    return (
        <div className="user-wrapper">
            <div className="user-name">{name}</div>
            <div className="user-age">{age}</div>
            <div className="user-status">
                {isActive ? 'Active' : 'Inactive'}
            </div>
        </div>
    );
};

export default User;

Verwendung wie üblich:

<User
    name="Max"
    age={30}
    isActive={true}
/>

Zwei Schreibweisen, gleicher Effekt — Destructuring im Parameter ist die idiomatische moderne Form.

Default-Werte für Props

Mit dem =-Operator beim Destructuring lassen sich Default-Werte für fehlende Props angeben. Wenn die Prop nicht übergeben wird (oder explizit undefined ist), greift der Default.

const CustomButton = ({ text = 'Speichern', type = 'default' }) => {
    return (
        <button className={`btn btn-${type}`}>{text}</button>
    );
};

export default CustomButton;

Vier Aufruf-Varianten, alle gültig:

<CustomButton />                          // alle Defaults
<CustomButton type="primary" />           // text default, type override
<CustomButton text="Senden" />            // type default, text override
<CustomButton text="Weiter" type="secondary" />  // beide override

Wichtig: nur undefined löst den Default aus, nicht null, nicht 0, nicht ''. Das ist konsistent mit JavaScript-Default-Parametern.

Komplexe Datentypen — Objekte und Arrays

Props können beliebige JavaScript-Werte sein: Strings, Numbers, Booleans, Objects, Arrays, Funktionen, sogar JSX-Elemente. Komplexe Daten werden in {...} gesetzt (außer Strings als Attribut-Wert, die in "...").

const SampleProduct = ({ productData }) => {
    return (
        <div className="product-data">
            <ul>
                <li><strong>Artikelname:</strong> {productData.name}</li>
                <li><strong>Preis:</strong> {productData.price}</li>
                <li><strong>Art-Nr.:</strong> {productData.articleNumber}</li>
                <li>
                    <strong>Auf Lager:</strong>
                    {productData.inStock ? 'Ja' : 'Nein'}
                </li>
            </ul>
        </div>
    );
};

export default SampleProduct;

const productInfos = {
    name: 'Laptop',
    price: 1299.99,
    articleNumber: '87263',
    inStock: true,
};

export default function App() {
    return <SampleProduct productData={productInfos} />;
}

Statt ein großes Objekt zu übergeben, kann man auch die einzelnen Properties als separate Props weitergeben — beides idiomatisch. Bei tieferer Verschachtelung wird das Objekt-Argument schnell unhandlich; einzelne Props sind dann lesbarer.

Funktionen als Props — Callbacks

Eine der häufigsten Anwendungen: einer Kind-Komponente eine Callback-Funktion als Prop übergeben, damit sie auf Events nach oben kommunizieren kann.

const LikeButton = ({ onLike }) => {
    return <button onClick={onLike}>Gefällt mir</button>;
};

const Post = () => {
    const handleLike = () => console.log('Geliked!');
    return <LikeButton onLike={handleLike} />;
};

Naming-Konvention: Event-Handler-Props beginnen mit on (onClick, onChange, onLike). Innerhalb der Kind-Komponente heißt der Handler oft handle... (handleLike, handleSubmit).

children als spezielle Prop

children ist eine reservierte Prop. Sie wird nicht als Attribut geschrieben, sondern automatisch mit allem gefüllt, was zwischen den Komponenten-Tags steht.

const Card = ({ children }) => {
    return <div className="card">{children}</div>;
};

const App = () => (
    <Card>
        <h2>Titel</h2>
        <p>Inhalt</p>
    </Card>
);

Damit wird die Card zum generischen Container, der nicht weiß, was er rendert — er reicht den Inhalt nur durch und stylt den Rahmen. Das ist das Fundament von Komposition, dem wichtigsten Strukturprinzip in React.

Details und Patterns dazu im Artikel zu Children Prop.

Spread-Operator für Props

Wenn ein Object alle Props enthält, kann man sie mit Spread an die Komponente weiterreichen:

const userProps = { name: 'Anna', age: 30, isActive: true };

// Ohne Spread
<User name={userProps.name} age={userProps.age} isActive={userProps.isActive} />

// Mit Spread — kompakt, aber unspezifischer
<User {...userProps} />

Praktisch beim Forwarding von Props (Wrapper-Komponente, die alle Props an die innere Komponente durchreicht). Vorsicht: Spread macht es schwer, auf einen Blick zu sehen, welche Props ankommen — gerade in TypeScript hilft das Compiler-Feedback.

TypeScript: Props typisieren

In TypeScript-Projekten definiert man explizit, welche Props eine Komponente erwartet. Das gibt Autocomplete, Type-Checks und vermeidet ganze Fehler-Klassen.

type UserCardProps = {
    name: string;
    age: number;
    isActive?: boolean;          // optional
    onClick?: () => void;
};

const UserCard = ({ name, age, isActive = false, onClick }: UserCardProps) => {
    return (
        <div onClick={onClick}>
            <h2>{name}</h2>
            <p>Alter: {age}</p>
            <p>Status: {isActive ? 'Aktiv' : 'Inaktiv'}</p>
        </div>
    );
};

Das alte React.FC<Props>-Pattern ist heute nicht mehr empfohlen — die direkte Typisierung des Parameters ist klarer und vermeidet implizite children-Annahmen.

Weiterführende Ressourcen

Externe Quellen

• Passing Props to a Component – react.dev
• JavaScript in JSX with Curly Braces – react.dev
• TypeScript with React – react.dev

Verwandte Artikel

• Children Prop
• Composition statt Inheritance
• State vs. Props
• Context API
• Einführung in Components