How to Design Components for a Family Feud Game in ReactJS

Part 2: A walkthrough of the components, functionality and how it all goes together.

Nivaaz
Nivaaz
Jun 4, 2020 · 6 min read
Photo by Nikita Kachanovsky on Unsplash

Ever designed and implemented your own game in ReactJS? I have! It’s super satisfying to do. I highly recommend you give it a go if you haven’t yet!

As more and more people begin remote working or integrate it into their routines, online games become even more attractive! In this story, I’ll talk you through how I designed the ReactJS components for a Family Feud style game I hacked together in less than a week!

This is part 2 of building a Family Feud Game in ReactJS, but you can also find how out how I designed and outlined the product in my previous story here. Check out part 1 if you haven’t already:

Family Feud Game in React JS

In the next story talks through the functions and keypress event handler for the game!

Resources:

The Design

A quick reminder of what our frontend will look like and an outline of our components.

Components & layout.

Components outline

We’re going to have the following components in our app

  • Cards/Card: render all the answers to questions, including scores.
  • Round buttons/s: these will be buttons to change rounds.
  • Question: displays the current question.
  • Player: to show the current player, score and incorrect guesses.
  • Header: to show the game name, round and score for all teams.

An in-depth illustration of the components can be seen below including all their props.

Components in the app — Nivaaz

State

We’re going to need a couple of state attributes before we can start the app.

  • Round: this will show the current round of the game.
  • Error: this will show how many incorrect guesses the current player has had.
  • Points: an array of points for the two teams.
  • Card data: This will hold the answers that will be rendered on cards.
  • Cards show: true if the card at that index should be showing it’s text.
  • Current player: will hold the index for the current team.
  • Players: this will hold the name for the two teams/players.
  • Show X: is how many ‘x’s are shown for incorrect guesses.
  • Round score: is the score accumulated per round.
  • Game name: a string for the game played.
state = {  round: 0,  error: 0,  points: [0, 0],  players: ["player 1", "player 2"],  cardData: data,  cardShow: [false, false, false, false, false, false],  currentPlayer: 0,  showX: false,  roundScore: 0,  gameName: "Family Feud"};

Let’s get coding.

I love to start my project by creating files and folders for all my components, which makes for clean and organised code. If you have your own system, go for it!

I go with the following structure:

  • Components folder
  • Folder for each component called the same as the file name.
  • Add the CSS file in the component’s folder.

In each javascript file I will also export the component, give it props and render the name of the component — so I can check that everything is working as I program.

Write the components.

(Single) Card component outline — Nivaaz

Props

  • Answer: will be the answer shown on the card.
  • isSelected: if the card’s answer (text)should be shown or not.
  • Score: the score shown for the card.

Functionality

All we really need to write here is the toggling of classes using the isSelected prop. So our code for this component will look something like this:

export const Card = (props) =>{  const isShown = props.isShown ? "showCard" : "hideCard";  return (  <div className="card">    <p className = {isShown}> {props.answer}</p>    <p className = {isShown}> {props.score}</p>  </div>  )}
Cards component outline — Nivaaz

Props

  • Card data: the answer and score for each card.
  • Card show: if the text on the card should be shown.
  • Round: the current round of the game.

Functionality

  • Map through the data for the current round and render a card component.

The code

export const Cards = (props) =>{  const cards = props.cardData[props.round].map((val, key) => { return (   <div className="card" key={key}>    <Card     answer={val.ans} score = {val.score} 
isShown={props.cardShow[key]}/>
</div> )})return ( <div className="cards-container"> {cards} </div> )}
(Single) Round button component — Nivaaz

Round Button

Props

  • Round number: the current round
  • Handle Click: function to change the current round.

Functionality

  • Show as selected if the current round matches that of the round button
  • Change the current round and data of the cards when clicked.
  • Each round will need a value, which will be the round number prop.

Code

const RoundButton = (props) =>{  const isSelected = props.isSelected ? "selected" : "";  return (   <button    className = {isSelected + " round-button"}    value = {props.roundNumber}    onClick = {props.handleClick}>    Round {props.roundNumber+1}   </button>)}

onHandleClick

When a button is clicked, the following will happen:

  • The score for the current round will be added to the current player’s total.
  • The round score will be reset
  • The showcards will be reset
  • The incorrect guesses will be reset (errors).

It will be passed Family → Round Buttons → Round Button.

All these functions can be found in the family file.

Round Buttons

Functionality

  • Render all the round buttons
  • Render the selected button

Props

  • CurrentRound: the number of the current round

The code

  • Map across all the buttons
  • For the button index which matches that of the Current Round, we will pass it “selected”

RoundScore

Functionality

  • Updates every time a card is flipped
  • Empty out when a new round is selected
  • Update the score for the current player when a new round is selected.

Props

  • currentRoundScore

Code

  • Just render the score

Question

Functionality

  • Shows the question for the current round

Props

  • All the questions
  • the current round

Code

  • Will render only the question for the current round

Player

Functionality

  • Displays the current player

Props

  • Names of both the players
  • current player id

Code

  • Render the player that matches the player id.

Header

Functionality

  • Show the players, gameName and players with their total scores.

Props

  • players
  • gameName
  • scores

Code

  • Render all three components, equally spaced using CSS grid.
  • This can also be done using flex and setting justify content to space-between.

And that’s it for the components! Check out the live demo here.

Check out part three where we shake things up and use keyboard shortcuts as a part of our game instead of buttons!

The Startup

Get smarter at building your thing. Join The Startup’s +787K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Nivaaz

Written by

Nivaaz

Electrical engineer turned (self-taught) software engineer & entrepreneur. Let’s talk about how I do things and why failing is actually great.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +787K followers.

Nivaaz

Written by

Nivaaz

Electrical engineer turned (self-taught) software engineer & entrepreneur. Let’s talk about how I do things and why failing is actually great.

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +787K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store