5. Technikwissen – Kurz erklärt

5.7. map

Ein Array durchlaufen und dabei neue Elemente erzeugen – mit .map()

Mit der Methode .map() kann man ein Array durchlaufen und für jeden Eintrag ein neues Element erzeugen. Das Ergebnis ist ein neues Array, das genauso viele Elemente enthält wie das ursprüngliche – aber in veränderter Form.

In der App-Entwicklung wird .map() häufig verwendet, um Daten in UI-Elemente zu überführen, z. B. um eine Liste von Texten auszugeben.

Beispiel:
Die gespeicherten Bewegungswerte sollen als Liste angezeigt werden:


bewegungen.map((wert, index) => (
  <Text key={index}>
    {index + 1}: {wert}
  </Text>
))

Jeder Wert im Array bewegungen wird dabei zu einem eigenen <Text>-Element. Der key sorgt dafür, dass React die Liste effizient verwalten kann.

Hinweis: .map() verändert das ursprüngliche Array nicht, sondern gibt ein neues Array mit den bearbeiteten Elementen zurück.

 Die Kombination aus .map() und JSX ist in React die Standardmethode, um Listen von Daten in sichtbare Inhalte umzuwandeln.

Allgemeine Datenschutzbestimmungen | Impressum
Herausgeber: Land Baden-Württemberg, vertreten durch das Zentrum für Schulqualität und Lehrerbildung (ZSL), Heilbronner Straße 314, 70469 Stuttgart, Telefon 0711/21859-0, poststelle@zsl.kv.bwl.de
Verantwortlich im Sinne des Presserechts: ZSL, Irmgard Mühlhuber, Ref. 24 "Digitalisierung, Medienbildung", Heilbronner Straße 314, 70469 Stuttgart, Telefon 0711/21859-240, digitalebildung@zsl.kv.bwl.de
Kontakt zum/r behördlichen Datenschutzbeauftragte/n: datenschutz@zsl.kv.bwl.de