Zum Abschluss der React-Grundlagen: wie Sie Inhalte je nach Bedingung ein-/ausblenden, und wie Sie aus einem Array von Daten automatisch mehrere Komponenten erzeugen – genau das, was wir gleich für unsere Produktliste brauchen.

Conditional Rendering: Inhalte je nach Bedingung anzeigen

In JSX gibt es keine if-Anweisung direkt im Markup (nur Ausdrücke sind in {{...}} erlaubt, siehe Kapitel 4). Es gibt drei gängige Techniken:

1. Der ternäre Operator (wenn es zwei Alternativen gibt)

<p>{istVerfuegbar ? 'Auf Lager' : 'Ausverkauft'}</p>

2. Der &&-Operator (wenn nur EINE Seite angezeigt werden soll)

<p>{istRabattiert && <span className="badge">Angebot!</span>}</p>

istRabattiert && ... nutzt aus, dass JavaScript bei && die rechte Seite nur auswertet, wenn die linke true ist – ist istRabattiert false, wird einfach false zurückgegeben, und React rendert bei false/null/undefined schlicht gar nichts.

3. Frühe Rückgabe (wenn ein ganzer Teil der Komponente ersetzt werden soll)

function Produktstatus({ produkt }) {
  if (!produkt) {
    return <p>Kein Produkt ausgewählt.</p>;
  }

  return <p>{produkt.name}</p>;
}

Listen mit .map() erzeugen

Um aus einem Array mehrere JSX-Elemente zu erzeugen, verwenden Sie die normale JavaScript-Methode .map() – kein spezieller React-Befehl nötig:

const zahlen = [1, 2, 3];

<ul>
  {zahlen.map((zahl) => (
    <li key={zahl}>Zahl: {zahl}</li>
  ))}
</ul>

Warum das key-Prop unverzichtbar ist

key ist eine spezielle Prop, die React NUR intern verwendet (Sie können nicht auf props.key in der Komponente zugreifen) – sie hilft React, beim Neuzeichnen genau zu erkennen, welches Listenelement welchem Datenobjekt entspricht, statt bei jeder Änderung die ganze Liste neu zu erzeugen. Fehlt key, warnt React in der Browser-Konsole und nimmt standardmäßig den Index – das funktioniert nur solange, wie sich die Reihenfolge der Liste nie ändert.

App.jsx aktualisieren: eine echte Produktliste

Jetzt kombinieren wir alles: ein hart codiertes Array von Beispielprodukten, gerendert per .map(), mit einer Bedingung für den Fall, dass die Liste leer ist. Ersetzen Sie den Inhalt von src/App.jsx:

import ProductCard from './components/ProductCard';

const BEISPIEL_PRODUKTE = [
  { sku: 'schuhe-01', name: 'Wanderschuhe', price: 89.99, imageUrl: 'https://picsum.photos/seed/1/300' },
  { sku: 'rucksack-01', name: 'Trekking-Rucksack', price: 59.5, imageUrl: 'https://picsum.photos/seed/2/300' },
  { sku: 'jacke-01', name: 'Regenjacke', price: 74.0, imageUrl: 'https://picsum.photos/seed/3/300' },
];

function App() {
  return (
    <div className="app">
      <h1>Produktkatalog</h1>
      {BEISPIEL_PRODUKTE.length === 0 && <p>Keine Produkte gefunden.</p>}
      <div className="product-grid">
        {BEISPIEL_PRODUKTE.map((produkt) => (
          <ProductCard
            key={produkt.sku}
            name={produkt.name}
            price={produkt.price}
            imageUrl={produkt.imageUrl}
            onSelect={() => alert(produkt.name + ' angeklickt')}
          />
        ))}
      </div>
    </div>
  );
}

export default App;

key={{produkt.sku}} verwendet die SKU als eindeutigen Schlüssel – genau das echte Feld, das wir später (ab Kapitel 22) auch von der echten Produkt-API bekommen. Damit ist Phase 1 abgeschlossen: Sie kennen jetzt JSX, Components, Props, State, Event Handling, Conditional Rendering und Listen – die Grundlage für alles Weitere.