How do I display on frontend the result of “methods.name.call()” web3 - method

Question

I am developing a document verification system with ReactJS and solidity - smart contract. I want to display the result of my smart contract's get().call() method on the frontend, with a popup or even with a simple text.

My question is how can I do this? My .get().call() method seems to be working fine without any problem.

Check the image below, that's my code for now. I use console.log() to display the result.

Answer 1

If the console.log function displays your code in the console your codes work well, now you need to change the state by using this.setState function or useState hook to re-render the component. because in the ReactJS architecture, changing the state causes to change the interface. if your component is a class component:

import React, { Component } from 'react';

~~~

class YourComponentName extends Component {
  constructor() {
    super();

    this.state = {
      result: '',
      ~~~
      ~~~
    };
  }

  onSubmitGet = async (event) => {
    event.preventDefault();
    cosnt hash = document.getElementById('hash').value;

    await this.state.contract.methods
      .get(hash)
      .call({ form: this.state.address })
      .then(res => this.setState({ result: res }))
  };

  ~~~

  render() {
    const { result } = this.state;

    return (
      <>
        <button onClick={this.onSubmitGet}>GET</button>
        <div>{result}</div>
      </>
    );
  }
};

The `~~~` means some other codes. actually, with using `setState` the `<div>{result}</div>` will change and show your result.