index.js

import React, { Component } from "react";
import BeadCodes from "./data/beadcodes.json";
// import { navigate } from "gatsby"

class IndexPage extends Component {

    state = {
        barcodeReceiptNo: ""
    }

    handleInputChange = event => {
        const target = event.target
        const value = target.value
        const name = target.name

        this.setState({
            [name]: value
        });
    }

    handleSubmit = event => {
        event.preventDefault();
        alert(`Your barcode number is ${this.state.barcodeReceiptNo}.`);
    }

    render () {
        return (
            <>
                <form className="submitForm" onSubmit={this.handleSubmit}>
                    <input
                        type="text"
                        name="barcodeReceiptNo"
                        value={this.state.barcodeReceiptNo}
                        onChange={this.handleInputChange}
                    />
                    <button type="submit">Submit</button>
                </form>
                <div>
                    {BeadCodes.map((beadCode, index) => {
                        return <h3>{beadCode.code}</h3>
                    })}

                    if ({this.state.barcodeReceiptNo} === {beadCode.code}) {
                        alert("It's a match!")
                    } else {
                        alert("Unlucky.")
                    }

                </div>
            </>
        );
    }
}

export default IndexPage;