Hardhat-React-3.js

import { useState } from "react";
import './App.css';
import Web3 from "web3";
import NumberChanger from "../src/artifacts/contracts/NumberChanger.sol/NumberChanger.json";

const contractAddress = "0xe7f1725E7734CE288F8367e1Bb143E90bb3F0512";

function App() {

const web3 = new Web3("http://localhost:8545");


let contract = new web3.eth.Contract(NumberChanger.abi, contractAddress);

async function getNumber() {
    try {
      const getStateNumber = await contract.methods.getNumber().call();
      setNewNumber(getStateNumber);
    } catch (error) {
      console.log("Error:", error);
    }
  }

  async function changeNumber() {
    // Assign array of accounts into getAccount variable
    let getAccount = await web3.eth.getAccounts();
    // Calling setNumber function and using first account to send transaction
    await contract.methods.setNumber(number).send({ from: getAccount[0] });
    // Resets input and h3 to blank
    setNewNumber("");
  }

  return (
    <div className="App">
      <header className="App-header">
        <h1>Welcome to Number Changer</h1>
        <h3 >
          Your number is: {number}
        </h3>
        <input
          placeholder="Enter a number"
          onChange={ (e) => setNewNumber(e.target.value) }
          value={number}
           />
        <button onClick={getNumber}>Get Number</button>
        <button onClick={changeNumber}>Set Number</button>
      </header>
    </div>
  );
}

export default App;