Skip to content

Today's puzzle

Create a simple React application that allows users to customize their hot chocolate. The application should have three inputs:

The type of hot chocolate mix (e.g. regular, dark, white) The type of milk (e.g. whole, skim, almond) The type of toppings (e.g. marshmallows, whipped cream, cinnamon) When the user selects the type of hot chocolate mix, the application should display the corresponding image of the hot chocolate mix. For example, if the user selects "dark" hot chocolate mix, the application should display an image of a cup of dark hot chocolate.

When the user selects the type of milk and toppings, the application should update the image of the hot chocolate to reflect the user's choices. For example, if the user selects "skim" milk and "whipped cream" topping, the application should display an image of a cup of hot chocolate with skim milk and whipped cream on top.

Start with this

To complete this challenge, you will need to use React's state to store the user's choices and update the image accordingly. You will also need to use JavaScript's onChange event to update the state when the user selects a new option.