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?

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.