The Header Component

The Header component has the name of our project, which is Asia Explorer, and the button that calls the onShuffle function.

Add the name

We can use any name here, but we’ll use Asia Explorer. The following snippet shows how to add the project’s name to the application:

const Header = () => {
  return (
    <React.Fragment>
      <h1 className="header">Asia Explorer</h1>
    </React.Fragment>
  );
};

export default Header;

Add the “shuffle” button

We’ll add the “shuffle” button, which starts a new game with reshuffled cards and resets our Turns to zero. To make it functional, we receive the onShuffle function as a prop in our component and pass this onShuffle function as an attribute to the onClick event.

Here’s how we can add the button.

const Header = ({onShuffle}) => {
  return (
    <React.Fragment>
      <h1 className="header">Asia Explorer</h1>
      <button onClick={onShuffle}>New Game</button>
    </React.Fragment>
  );
};

export default Header;

We get the following code by combining all snippets and importing the Header component in App.js: