Coding React functions to get and display data from third-party websites

Question

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.

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);
    }

The following code is the thirdweb library code that interacts with smart contracts. The code below is stored in the refer.js file.

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)
}

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.

import React, { useEffect } from 'react'
function App(){
const handleclick = async (e) => {
    await call();
  }
 return (
<button onClick={handleclick}>click me</button>
  )
}

export default App

It generates an error like undefined function call().

Answer 1

I would create a new hook (useCall.js) that just instantiates the useContract and useContractWrite hooks and then does it for you Use the defined call() method in any component.

In this example, call() is the only thing returned from the hook. It is wrapped in useCallback to ensure that it is only defined when createUser is defined.

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;
}

Now in any component you can use this hook and get the call() function:

import useCall from './useCall';

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

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