Calling solidity function from React UI raises error

Question

solidity function

function spinWheel() public {
    /* are there any bets? */
    require(bets.length > 0);
    /* are we allowed to spin the wheel? */
    require(block.timestamp > nextRoundTimestamp);
    /* next time we are allowed to spin the wheel again */
    nextRoundTimestamp = block.timestamp;
    /* calculate 'random' number */
    uint diff = block.difficulty;
    bytes32 hash = blockhash(block.number-1);
    Bet memory lb = bets[bets.length-1];
    uint number = uint(keccak256(abi.encodePacked(block.timestamp, diff, hash, lb.betType, lb.player, lb.number))) % 37;
    /* check every bet for this number */
    for (uint i = 0; i < bets.length; i++) {
      bool won = false;
      Bet memory b = bets[i];
      if (number == 0) {
        won = (b.betType == 2 && b.number == 0);                   /* bet on 0 */
      } else {
        if (b.betType == 2) { 
          won = (b.number == number);                              /* bet on number */
        } 
        else if (b.betType == 1) {
          if (b.number == 0){ 
          won = (number % 2 == 0);
          }              /* bet on even */
          else if (b.number == 1){ 
          won = (number % 2 == 1);
          }              /* bet on odd */
         }
          else if (b.betType == 0) {                   
            if (isBlack(b.number)) {                     /* bet on black */
              won = true;
          } else {                                                 /* bet on red */
            if (isRed(b.number)) {
              won = true;
          }
        }
      }
    }
  
      /* if winning bet, add to player winnings balance */
      if (won) 
      {
        address winner = b.player;
       if(!winners[winner]){
        uint index = numberOfWinners++;
        winners[winner] = true;
        lutWinners[index] = winner;
        }
        uint payout = payouts[b.betType] * betAmount;
       winnings[winner] += payout;
       }
    }
    

    /* delete all bets */
    delete bets;
    /* reset necessaryBalance */
    necessaryBalance = 0;
    /* check if to much money in the bank */
    if (address(this).balance > maxAmountAllowedInTheBank) takeProfits();
    /* returns 'random' number to UI */
    emit RandomNumber(number);
    latestWinningNumber = number;
  }

React call

  const handleSpin = async () => {
      const {contract,web3} = web3Api
      const creator = await contract.getCreator();
      try {
        await contract.spinWheel().send({from: creator});
        setStatus("Wheel spun successfully!");
      } catch (err) {
        setStatus("Error spinning wheel.");
      }



      const winningNumber = await contract.getLatestWinningNumber()
      .on("data", (event) => {
        setWinningNumber(winningNumber);
      })
      .on("error", console.error);
      setShowWinningNumbe(true);
      const balance = await web3.eth.getBalance(contract.address);
      setBalance(web3.utils.fromWei(balance, "ether"));
      const winners = await contract.getWinners();
      setWinners(winners);
    };

Error is:

formatters.js:176 Uncaught (in promise) Error: The send transactions "from" field must be defined! at handleSpin

this is pointing at await contract.spinWheel().send({from: creator});

Answer 1

The error is saying that you are not providing any value to from in the send function.

It is possible that this line is not returning anything:

const creator = await contract.getCreator();

Try to console.log the value of creator.