Create a Coin Flipping App using ReactJS

Last Updated : 23 Jul, 2025

In this article, we will build a coin flipping application. In which the user can flip a coin and get a random result from head or tails. We create three components 'App' and 'FlipCoin' and 'Coin'. The app component renders a single FlipCoin component only. FlipCoin component contains all the behind the logic. It has a default prop coin that is an array that contains two images head and tail (sides of a coin). It is a stateful component. The handler function also keeps track of how many times the flip button is clicked and how many times the head face generated randomly and updates its value to the respective state.

Let us have a look at how the final application will look like:

👁 Image

Coin Flipping App using ReactJS

Prerequisites:

Steps to create application:

Step 1: Create the project file using command

npm create vite@latest flip --template react

Step 2: Navigate to the folder using the command

cd flip

Step 3: Create the folder components and inside the folder create two files FlipCoin.js and Coin.js

After following the above steps the project structure will look like:

Project Structure

👁 Image

The dependencies in package.json will look like:

package.json:

{
 "dependencies": {
 "react": "^18.2.0",
 "react-dom": "^18.2.0",
 "react-scripts": "5.0.1",
 "vite": "^4.0.0"
 },
 "devDependencies": {
 "vite": "^4.0.0"
 }
}

Example:

App.js: App component renders single FlipCoin component only
FlipCoin.js: It contains all the behind logic. It is a stateful component. The states are currFace, totalFlips, and heads.It is responsible for Setting event handler, updating all the states according to the user interaction render Coin component.
Coin.js: Responsible to show a side of a coin according to the currFace state of FlipCoin component. FlipCoin component communicates with the Coin component through the props system

Steps to run the applicaton:

Step 1: Type the following command in terminal