Penguins

📂 Naam project: lab-components-penguin-gallery
🔗 Basis project: n/a

Maak een nieuw project aan en noem deze lab-components-penguin-gallery Penguins.json in je src folder.

• importeer dit bestand in je project aan de hand van import penguins from './penguins.json';
• Maak een component PenguinCard dat een penguin toont. Dit component aanvaard een property penguin met het type van een penguin uit het json bestand.
• Filter de pinguïns zodat je enkel de vrouwelijke pinguïns toont (property gender is "Female").
• Toon alle vrouwelijke pinguïns in een grid met 3 kolommen. Gebruik hiervoor css modules.

Live voorbeeld

Voorbeeld laden…

Oplossing downloaden

Eerst zelf proberen!

Maak de oefening eerst zelf, ook als het moeizaam gaat. Pas daarna download je de oplossing om ze met je eigen code te vergelijken.

Als je meteen de oplossing bekijkt, leer je niets. Het zoeken en vastlopen is net het deel waar je het meeste uit leert.

Ik heb het geprobeerd, download