<p>Help me get information from the blockchain and display it in the browser. I want to know how to call this thirdweb function in React. The code below is the Solidity code used to create users in our system. </p> <pre class="brush:php;toolbar:false;">function createUser(string memory _userId, string memory _fName, string memory _lName, string memory _mobile, string memory _dob, uint256 _age, string memory _nationality, string memory _gender ) public { if(!chkexisitinguserId(_userId)){ users[_userId] = User(_fName, _lName, _mobile, _dob, _age,_nationality,_gender); noofUser; allUserId[k] = _userId; k ; } } function getUser(string memory _userId) public view returns (string memory, string memory, string memory, string memory, uint256, string memory, string memory) { User memory user = users[_userId]; return (user.fName, user.lName, user.mobile, user.dob, user.age, user.nationality, user.gender); }</pre> <p>The following code is the thirdweb library code that interacts with smart contracts. The code below is stored in the refer.js file. </p> <pre class="brush:php;toolbar:false;">import { useContract, useContractWrite } from "@thirdweb-dev/react"; export default function Component() { const { contract } = useContract("0xBB417720eBc8b76AdeAe2FF4670bbc650C3E791f"); const { mutateAsync: createUser, isLoading } = useContractWrite(contract, "createUser") const call = async () => { try { const data = await createUser([ "John0312", "John", "s", "8090890367", "03-11-2000", 20, "India", "M" ]); console.info("contract call successes", data); } catch (err) { console.error("contract call failure", err); } } } export default function Component() { const { contract } = useContract("0xBB417720eBc8b76AdeAe2FF4670bbc650C3E791f"); const { data, isLoading } = useContractRead(contract, "getUser", _userId) }</pre> <p>The smart contract has been deployed on thirdweb and trying to access it. I'm stuck on how to call this "call" async function from app.js. </p> <pre class="brush:php;toolbar:false;">import React, { useEffect } from 'react' function App(){ const handleclick = async (e) => { await call(); } return ( <button onClick={handleclick}>click me</button> ) } export default App</pre> <p>It generates an error like undefined function call(). </p>

export default function useCall() {
  const { contract } = useContract("0xBB417720eBc8b76AdeAe2FF4670bbc650C3E791f");
  const { mutateAsync: createUser, isLoading } = useContractWrite(contract, "createUser")

  const call = React.useCallback(async () => {
    try {
      const data = await createUser([ "John0312", "John", "s", "8090890367", "03-11-2000", 20, "India", "M" ]);
      console.info("contract call successs", data);
    } catch (err) {
      console.error("contract call failure", err);
    }
  }, [createUser]);
  
  return call;
}

import useCall from './useCall';

export default function Component() {
  const call = useCall();

  useEffect(() => {
    (async () => {
      await call();
    })();
  }, []);
}