0

I have written a basic hello world! smart contract and deployed using testrpc and truffle. I have a function in the contract that returns a value and i am using this function and the value it returns to display the value in webpage using react and java script code.Codes are below

1. Greeter.sol

pragma solidity ^0.5.0;
contract Greeter{
    string greeting;
    function greeter(string memory _greeting) public{
        greeting = _greeting;
    }

    function greet()public view returns(string memory){
        return greeting;
    }
}

2. EthereumSetup.js

import Web3 from 'web3';
    const web3 = new Web3( new Web3.providers.HttpProvider("https://localhost:8545"));
    let greeterABI = [ { constant: false,
        inputs: [ [Object] ],
        name: 'greeter',
        outputs: [],
        payable: false,
        stateMutability: 'nonpayable',
        type: 'function',
        signature: '0xfaf27bca' },
      { constant: true,
        inputs: [],
        name: 'greet',
        outputs: [ [Object] ],
        payable: false,
        stateMutability: 'view',
        type: 'function',
        signature: '0xcfae3217' } ];
    let greeterAddress = '0x52F2Ce3bB739567a05AA4eA36720028946c46C5f';
    const greeterContract = web3.eth.Contract(greeterABI,greeterAddress);

    export{greeterContract};

3.App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import {greeterContract} from './EthereumSetup';
import Web3 from 'web3'
class App extends Component {
  constructor(props){
    super(props)
    this.state={
      greeting: ""
    }
  }
 async componentWillMount(){

      var data =await greeterContract.methods.greet().call()

    this.setState({
      greeting: String(data)
    })

  }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
            <h2>"{this.state.greeting}"</h2>
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

I have running testrpc and npn start to load the webpage its all going fine I opened the truffle console and gave commands to set the value of the variable and even invoked the greet()(function that returns value) its image is here Truffle console image

Before calling greeter function with value to set i get nothing like value of variable before assigning value

I know there is some error in componentWillMount() of App.js file which is making my web page blank. Please help me in this regard and i know testrpc is quite outdated

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.