title: web3 react contract interaction
body: <p>I am having some issues when calling a contract via form with React and Web3 component. </p>
  
  <p>In my contract, I have a public function called GetDomainInfo which takes the domain as a parameter. You can view the contract here: <a href="https://ropsten.etherscan.io/address/0x756ad7f7c22e7c04a845bd8a138e455a1bc95f6f" rel="nofollow noreferrer">https://ropsten.etherscan.io/address/0x756ad7f7c22e7c04a845bd8a138e455a1bc95f6f</a></p>
  
  <p>The problem is that my components gets the form value, but when use it in a contract, gives the error: </p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'GetDomainInfo' of undefined
  </code></pre>
  
  <p>Code:</p>
  
  <pre><code>GetInfo = (event) =&gt; { 
  event.preventDefault();
  console.log(this.state.value);
  const response = this.state.rouDomains.method.GetDomainInfo(this.state.value).send({from: this.state.account})
  .once('receipt', (receipt) =&gt; {
    console.log("receipt: ", receipt);
    console.log(response);
  })
  }
  </code></pre>
  
  <p>The data arrives in console.log(this.state.value), I can see it. </p>
  
  <p>EDIT: rouDomains is the async load data from web3. </p>
  
  <pre><code>async loadData() {
  const web3 = new Web3(Web3.givenProvider || "http://localhost:8545");
  const network = await web3.eth.net.getNetworkType();
  this.setState({network});
  //Fetch account
  const accounts = await web3.eth.getAccounts();
  this.setState({ account: accounts[0]});
  //Load the contract
  const rouDomains = new web3.eth.Contract(ROU_TLD, ROU_TLD_ADDRESS);
  this.setState({ rouDomains });
  console.log("ROU: ", rouDomains);
  }
  </code></pre>