Create a PIN Pad with React and JavaScript

React is an easy to use JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create a PIN pad with React and JavaScript.

Create the Project

We can create the React project with Create React App.

To install it, we run:

npx create-react-app pin-pad

with NPM to create our React project.

Create the PIN Pad

To create the PIN pad, we write:

import React, { useState } from "react";

export default function App() {
  const [pin, setPin] = useState("");

  return (
    <div>
      <div>{pin}</div>
      <div>
        <div>
          <button onClick={() => setPin((pin) => `${pin}1`)}>1</button>
          <button onClick={() => setPin((pin) => `${pin}2`)}>2</button>
          <button onClick={() => setPin((pin) => `${pin}3`)}>3</button>
        </div>
        <div>
          <button onClick={() => setPin((pin) => `${pin}4`)}>4</button>
          <button onClick={() => setPin((pin) => `${pin}5`)}>5</button>
          <button onClick={() => setPin((pin) => `${pin}6`)}>6</button>
        </div>
        <div>
          <button onClick={() => setPin((pin) => `${pin}7`)}>7</button>
          <button onClick={() => setPin((pin) => `${pin}8`)}>8</button>
          <button onClick={() => setPin((pin) => `${pin}9`)}>9</button>
        </div>
        <div>
          <button onClick={() => setPin((pin) => pin.slice(0, pin.length - 1))}>
            &lt;
          </button>
          <button onClick={() => setPin((pin) => `${pin}0`)}>0</button>
          <button onClick={() => setPin("")}>C</button>
        </div>
      </div>
    </div>
  );
}

We create the pin state to hold the string that’s created when we click the buttons.

Then we show the pin value.

And then we add the buttons which have the onClick prop set to a function that calls setPin with a callback that returns the pin string.

The < button has a setPin callback that returns the pin string with the last character removed.

And the C button has a setPin callback that resets pin to an empty string.

Conclusion

We can create a PIN pad easily with React and JavaScript.