Calling a Solidity function from React

Question

The contract:

pragma solidity ^0.4.19;

contract Info {
  /* some other setters */

  function ageOf(uint256 _tokenId) public view returns (uint256 age) {
        return ages[_tokenId];
  }

  function ownersAddress(uint256 _tokenId) public view returns (address addr);
}

Then, I have React Parent component:

class Parent extends React.component {
  render () {
    <div>
      <Child />
    </div>
  }
}

and the Child component:

export class Child extends React.Component {
  render() {
    <div className="age">
      Solidity ageOf() goes here
    </div>
    <div className="owner">
      Solidity ownersAddress() goes here
    </div>
  }
}

I am new to Dapp development, and struggling to link these all together. Particularly, how to initiate the Solidity functions in React, and how to make the Component to "query" Ethereum so that whenever the age parameter changes it'd update the corresponding <div> value?

P.S. I'm using Truffle/Ganache and Truffle's React Auth box.

Answer 1

check out the simpleStorage react example, it's a great place to get started and is what i used for framework. I then started replacing parts and testing.

work in progress is my current App.js file. i've instantiated 3 and gotten data out of them. Note it is STILL a work in progress.