Build a memory game

Build a memory game in React.

You start with 6 images that you will display as 12 cards. By default, they are "flipped" - you only get a placeholder instead of the image.

As the user clicks a "card", flip it around, revealing the image.
When the user clicks the same picture twice, in a row, then it means he has a match - so keep the images visible from then onwards.

You can build the game as a React component that takes in an array of images.

Here's an example of how it will be used - you can use this image array for testing:

<MemoryGame
   images={[
        "https://images.unsplash.com/photo-1626808642875-0aa545482dfb",
        "https://images.unsplash.com/photo-1546842931-886c185b4c8c",
        "https://images.unsplash.com/photo-1520763185298-1b434c919102",
        "https://images.unsplash.com/photo-1442458017215-285b83f65851",
        "https://images.unsplash.com/photo-1496483648148-47c686dc86a8",
        "https://images.unsplash.com/photo-1591181520189-abcb0735c65d",
   ]}
/>

To shuffle the images, you can use the lodash library, which has a handy shuffle method (https://www.geeksforgeeks.org/lodash-_-shuffle-method/)

Share a link to your solution in the comments below!

To get started, you can clone the starter repo.

When you're ready to check your work, take a look at the official solution.

Note: You'll notice the UI is very basic, without any animations or shadows - it's because the focus on this exercise is on the React part. If you want, feel free to add a nicer UI!