In React.js, How can I get return data from smart contract method including event and emit?

Question

I have smart contract server function and that function including emit and event.

event TokenMinted(
        address indexed _recipient, 
        uint256 indexed _tokenId
        );

 function mintToken(address to, address[] memory bundle) public {
        // Mint new token
        uint256 tokenId = _tokenIdCounter.current();
        .........
        // Emit TokenMinted event
        emit TokenMinted(to, tokenId);
        // Increase the token counter
        _tokenIdCounter.increment();
    }

Not I'm going to call this function and hope to get tokenId.

But In my React frontend code, I can't find method to get tokenId.

export const mintToken = async (contract, to, address) => {
  let tokenId = await contract.mintToken(to, address);
  console.log('contracts', contract)
  // console.log('contract.events', contract.filters.TokenMinted())
  //get the latest blocknumber

  return tokenId;
}

The contract generated like this.

new ethers.Contract(ROCI_MINTER_ADDR, ROCI_MINTER_ABI, library.getSigner());

How can I get this value correctly? Thanks for attention.

Answer 1

that is not neither a view or a pure function, so you probably are looking for something like this (check here for documentation):

let tx = await contract.mintToken(to, address).send({from: '0x123123123123'});

let events = tx.receipt.events
console.log(events)

Answer 2

The latest docs says to do the following:

contract.events.TokenMinted().on('data', this.contractEventHandler )

it depends on the version of web3 you have. Here are the docs. https://web3js.readthedocs.io/en/v1.5.2/web3-eth-contract.html#id50

Note; I was having errors when I tried to locally copy and manipulate a react state variable in the contractEventHandler, however, doing the following worked for me setState({tokens:[...this.state.tokens,token]});