Kleuren Selectie

📂 Naam project: lab-state-color-select
🔗 Basis project: n/a

Maak een nieuwe React applicatie aan en noem deze lab-state-color-select.

Maak een component ColorSelect aan met de volgende functionaliteit:

• Het component bevat een select met de volgende kleuren: red, green, blue, yellow, orange, purple, black, white. Er kunnen meerdere kleuren geselecteerd worden.
• Het component bevat een state property selectedColors die een array bevat met de geselecteerde kleuren.
• Het component bevat een button met de tekst "Show colors". Als de gebruiker op deze button klikt moet de gebruiker een lijst zien met de geselecteerde kleuren.
• Als je op een kleur klikt in de lijst, krijgt de gebruiker een prompt met de vraag om een nieuwe kleur te kiezen. Als de gebruiker op "OK" klikt, moet de kleur in de lijst vervangen worden door de nieuwe kleur.

tip

Je moet hier twee states gebruiken: selectedColors en colors. De eerste state bevat de geselecteerde kleuren, de tweede state bevat de kleuren die moeten getoond worden. De tweede state wordt aangepast als de gebruiker op de button klikt. Het is een kopie van de eerste state op de moment dat de gebruiker op de button klikt.

Gebruik dit component in de App component om de volgende pagina te maken:

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