Counter list

📂 Naam project: lab-state-counter-list
🔗 Basis project: n/a

Maak een nieuwe React applicatie aan en noem deze lab-state-counter-list.

Maak een component ButtonList aan met de volgende functionaliteit:

• Het component bevat 1 state genaamd counters. Deze state bevat een array van getallen. Deze array begint bij een lege array.
• Het component bevat een button met de tekst "Add counter". Als de gebruiker op deze button klikt, moet er een nieuw getal aan de array toegevoegd worden. Het getal moet 0 zijn.
• Bij elke counter moet er een button getoond worden met de tekst "Increment" of "Decrement". Als de gebruiker op deze button klikt, moet het getal van de overeenkomstige counter verhoogd of verlaagd worden.
• Onderaan staat de som van alle waarden van de counters.

notitie

Je hoeft nog niet elke counter in een apart component te zetten. Je gaat dit later nog doen.

Live voorbeeld

Voorbeeld laden…

Oplossingsvideo

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