Props – Daten weitergeben

Props (kurz fuer Properties) sind der Mechanismus, mit dem du Daten von einer Eltern-Komponente an eine Kind-Komponente uebergibst. Sie sind wie Funktionsparameter – aber fuer Komponenten.

Was sind Props?

Props sind die Eingabewerte einer Komponente:

// Ohne Props - statisch
function Greeting() {
  return <h1>Hallo, Max!</h1>;
}

// Mit Props - dynamisch
function Greeting({ name }) {
  return <h1>Hallo, {name}!</h1>;
}

// Verwendung
<Greeting name="Max" />
<Greeting name="Anna" />
<Greeting name="Tom" />

Dieselbe Komponente, drei verschiedene Ergebnisse – das ist die Kraft von Props!

Props uebergeben

Props werden wie HTML-Attribute geschrieben:

function App() {
  return (
    <UserCard
      name="Max Mustermann"
      age={25}
      isAdmin={true}
      hobbies={['Coding', 'Gaming', 'Lesen']}
      address={{ city: 'Berlin', zip: '10115' }}
    />
  );
}

Verschiedene Datentypen

// Strings - mit Anfuehrungszeichen
<Component title="Hallo" />

// Zahlen - mit geschweiften Klammern
<Component count={42} />

// Booleans - mit geschweiften Klammern
<Component isVisible={true} />
<Component isVisible />        // Kurzform fuer {true}

// Arrays
<Component items={['A', 'B', 'C']} />

// Objekte
<Component user={{ name: 'Max', age: 25 }} />

// Funktionen
<Component onClick={() => console.log('Klick!')} />

// Variablen
<Component data={myVariable} />

Props empfangen

Destructuring (empfohlen)

function UserCard({ name, age, role }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Alter: {age}</p>
      <p>Rolle: {role}</p>
    </div>
  );
}

Props-Objekt

function UserCard(props) {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>Alter: {props.age}</p>
      <p>Rolle: {props.role}</p>
    </div>
  );
}

Destructuring ist uebersichtlicher – du siehst sofort, welche Props die Komponente erwartet.

Default-Werte

Du kannst Standardwerte fuer Props definieren:

function Button({ text = 'Klick mich', variant = 'primary', disabled = false }) {
  const styles = {
    primary: { backgroundColor: '#3498db', color: 'white' },
    secondary: { backgroundColor: '#95a5a6', color: 'white' },
    danger: { backgroundColor: '#e74c3c', color: 'white' }
  };

  return (
    <button
      style={{
        ...styles[variant],
        padding: '8px 16px',
        border: 'none',
        borderRadius: '6px',
        cursor: disabled ? 'not-allowed' : 'pointer',
        opacity: disabled ? 0.5 : 1
      }}
      disabled={disabled}
    >
      {text}
    </button>
  );
}

// Verwendung
<Button />                                  // "Klick mich", primary
<Button text="Senden" />                    // "Senden", primary
<Button text="Loeschen" variant="danger" /> // "Loeschen", danger
<Button text="Inaktiv" disabled />          // "Inaktiv", primary, deaktiviert

Props sind schreibgeschuetzt

Eine der wichtigsten Regeln in React: Props duerfen nicht veraendert werden!

// FALSCH - Props niemals aendern!
function Greeting({ name }) {
  name = name.toUpperCase(); // Nicht machen!
  return <h1>{name}</h1>;
}

// RICHTIG - Neue Variable erstellen
function Greeting({ name }) {
  const displayName = name.toUpperCase();
  return <h1>{displayName}</h1>;
}

Props weitergeben (Prop Drilling)

Props werden von Eltern zu Kindern weitergegeben:

function App() {
  const user = { name: 'Max', role: 'Admin' };
  return <Dashboard user={user} />;
}

function Dashboard({ user }) {
  return (
    <div>
      <h1>Dashboard</h1>
      <Sidebar user={user} />
    </div>
  );
}

function Sidebar({ user }) {
  return (
    <aside>
      <UserBadge name={user.name} role={user.role} />
    </aside>
  );
}

function UserBadge({ name, role }) {
  return <span>{name} ({role})</span>;
}

Spread-Operator fuer Props

Wenn du viele Props weiterreichen musst, hilft der Spread-Operator:

function App() {
  const buttonProps = {
    text: 'Speichern',
    variant: 'primary',
    disabled: false,
    onClick: () => console.log('Gespeichert!')
  };

  return <Button {...buttonProps} />;
}

// Ist dasselbe wie:
<Button
  text={buttonProps.text}
  variant={buttonProps.variant}
  disabled={buttonProps.disabled}
  onClick={buttonProps.onClick}
/>

Rest-Props weiterleiten

function CustomInput({ label, ...rest }) {
  return (
    <div>
      <label>{label}</label>
      <input {...rest} />
    </div>
  );
}

// Alle Standard-Input-Props werden weitergeleitet
<CustomInput
  label="E-Mail"
  type="email"
  placeholder="name@example.com"
  required
/>

Funktionen als Props (Callbacks)

Du kannst Funktionen als Props uebergeben, um Kind-Komponenten mit Eltern kommunizieren zu lassen:

function App() {
  function handleClick(message) {
    alert(message);
  }

  return <AlertButton onAlert={handleClick} />;
}

function AlertButton({ onAlert }) {
  return (
    <button onClick={() => onAlert('Button wurde geklickt!')}>
      Alarm ausloesen
    </button>
  );
}

Daten vom Kind zum Elternteil

function App() {
  function handleSearch(searchTerm) {
    console.log('Suche nach:', searchTerm);
  }

  return <SearchBar onSearch={handleSearch} />;
}

function SearchBar({ onSearch }) {
  const [query, setQuery] = useState('');

  return (
    <form onSubmit={(e) => {
      e.preventDefault();
      onSearch(query);
    }}>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Suchen..."
      />
      <button type="submit">Suchen</button>
    </form>
  );
}

Praktisches Beispiel: Produktliste

function ProductCard({ product, onAddToCart }) {
  return (
    <div style={{
      border: '1px solid #ddd',
      borderRadius: '8px',
      padding: '1rem',
      maxWidth: '250px'
    }}>
      <h3>{product.name}</h3>
      <p style={{ color: '#666' }}>{product.description}</p>
      <p style={{ fontWeight: 'bold', fontSize: '1.2rem' }}>
        {product.price.toFixed(2)} Euro
      </p>
      <button
        onClick={() => onAddToCart(product)}
        style={{
          width: '100%',
          padding: '8px',
          backgroundColor: '#27ae60',
          color: 'white',
          border: 'none',
          borderRadius: '4px',
          cursor: 'pointer'
        }}
      >
        In den Warenkorb
      </button>
    </div>
  );
}

function ProductList() {
  const products = [
    { id: 1, name: 'React-Buch', description: 'Lerne React', price: 29.99 },
    { id: 2, name: 'JavaScript-Kurs', description: 'JS meistern', price: 49.99 },
    { id: 3, name: 'CSS-Guide', description: 'Styling-Profi', price: 19.99 }
  ];

  function handleAddToCart(product) {
    console.log(`${product.name} zum Warenkorb hinzugefuegt!`);
  }

  return (
    <div style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
      {products.map(product => (
        <ProductCard
          key={product.id}
          product={product}
          onAddToCart={handleAddToCart}
        />
      ))}
    </div>
  );
}

Uebungen

1. Erstelle eine Alert-Komponente mit Props fuer type (success/warning/error), title und message
2. Baue eine StarRating-Komponente, die eine Anzahl Sterne (1-5) als Prop empfaengt und entsprechend viele Sterne anzeigt
3. Erstelle eine TodoList, bei der ein onDelete-Callback vom Kind zum Elternteil kommuniziert

Was kommt als Naechstes?

Du weisst jetzt, wie Props funktionieren. Im naechsten Kapitel lernst du Children kennen – eine spezielle Prop, die es dir erlaubt, Inhalte zwischen die oeffnenden und schliessenden Tags einer Komponente zu packen.

Zusammenfassung

• Props sind die Eingabewerte einer Komponente – wie Funktionsparameter
• Du kannst alle JavaScript-Datentypen als Props uebergeben
• Props sind schreibgeschuetzt – aendere sie niemals direkt
• Nutze Destructuring beim Empfangen und Default-Werte fuer optionale Props
• Callback-Funktionen als Props ermoeglichen die Kommunikation von Kind zu Eltern
• Der Spread-Operator hilft beim Weiterleiten vieler Props

---