From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Unlock this course with a free trial

Join today to access over 25,200 courses taught by industry experts.

Conditionally show graffiti when the game is won

Conditionally show graffiti when the game is won

From the course: Master React 19 and Next.js 16 with Hands-On Projects and Real-World Applications

Start my 1-month free trial Buy for my team

Conditionally show graffiti when the game is won

“

In this session, you will learn how to create a celebratory graffiti component in your memory matching game. This component will display a vibrant You Win message once the player successfully matches all card pairs. Let's get started. Moving to App.jsx. I am adding the conditional rendering logic for our graffiti component. This line ensures that the graffiti component only renders when the number of matches is equal to half the length of the deck, meaning all pairs have been matched. This implements the core functionality of displaying the graffiti only upon winning the game. For testing purposes, I'm temporarily setting the initial value of matches to 8. This will allow us to see the graffiti component immediately without having to play the game. Remember, we'll change this back to 0 later. Moving to graffiti.jsx. Let's create the initial structure for our graffiti component. I'm adding a simple div to contain the winning message, which is currently just the text, you win. Now, you…

Contents