Lijst-herhaler

Herhaalt een stukje opmaak voor elk item in een lijst: geef 'm een lijstveld (of een komma-gescheiden tekst) en de inhoud wordt één keer per item gerenderd. Handig voor tags, badges of eigenschappen die als lijst bij een record horen. De technische naam is Each.

Gebruik Each zodra je een dynamische lijst uit een record wilt tonen zonder voor elk item los JSX te schrijven: tags bij een artikel, kenmerken van een product, stappen in een proces. Het component neemt zowel een lijstveld van een record als een handmatige, komma-gescheiden tekst aan, waardoor je het ook zonder onderliggende data kunt gebruiken.

Een veelvoorkomend patroon is Each combineren met Records: eerst een lijst records ophalen, en per record met Each de bijbehorende tags of eigenschappen als badges tonen.

Gebruiksscenario's per site-type

Bij een webshop toon je met Each de maten of kleuren van een product als los klikbare badges, rechtstreeks vanuit een lijstveld van het productrecord. Een portfolio-site gebruikt het block voor de gebruikte technieken of software per project — een handige manier om projecten herkenbaar te labelen zonder voor elk project apart JSX te schrijven. Bij een zakelijke dienstverlener toon je met Each bijvoorbeeld de branches of vakgebieden waarin een adviseur actief is, als compacte lijst tags onder diens profiel.

Samenspel met andere blocks

De sterkste combinatie is Each binnen Records: eerst haal je met Records een lijst artikelen, producten of teamleden op, en per record render je met Each de bijbehorende tags. Zonder deze combinatie moet je voor variabele lijstlengtes zelf conditionele JSX schrijven, wat foutgevoeliger is dan het declaratieve patroon dat Each biedt.

Een veelgemaakte fout is Each gebruiken voor een vaste, korte lijst die nooit wijzigt — twee of drie badges typ je net zo makkelijk direct als losse Badge-componenten, zonder de overhead van een lijstveld. Gebruik dit block dus specifiek wanneer de lijst per record verschilt of uit datatype-velden komt. Let er bij lange lijsten op dat de badges kunnen omslaan (flexWrap='wrap' op de omliggende HStack), anders lopen ze op kleinere schermen buiten beeld.

Voorbeeld

De prompt voor dit voorbeeld

Toon de woorden Snel, Flexibel en Headless als paarse badges naast elkaar.