Hinweis 02-1: Die Liste
Stufe 1: Denkfrage
LeadList bekommt leads (ein Array) und onSelect (eine Funktion). Wie macht man in
React aus einem Array von Dingen eine Liste von Zeilen? Welche Methode von Arrays
verwandelt jedes Element in etwas Neues?
Stufe 2: Teilbeispiel
<table data-testid="lead-list">
<tbody>
{leads.map((lead) => (
<tr key={lead.id} data-testid={`lead-row-${lead.id}`} onClick={() => onSelect(lead.id)}>
<td>{lead.company}</td>
{/* weitere Spalten */}
</tr>
))}
</tbody>
</table>
Beachte die Backticks bei data-testid: Das ist ein Template-String, der lead-row- und
die ID zusammensetzt. key braucht React, um Zeilen auseinanderzuhalten.
Stufe 3: Konkrete Erklärung
Die Tests prüfen in jeder Zeile den Text der Firma, des Kontaktnamens und des Status.
Ergänze also drei <td>: lead.company, lead.contactName, lead.status. Für die
Tastatur ergänze in einer vierten Spalte einen <button type="button" onClick={...}>Öffnen</button>.
Damit der Klick auf den Button nicht zusätzlich den Zeilen-Klick auslöst, rufe im Button
event.stopPropagation() auf, oder lass den Zeilen-Klick ganz weg und nutze nur den Button.
Beides besteht die Tests.