How to return json data to a react state?

Question

I have a react component that makes a .post to an express server (my own server). The server uses web3 to sign a transaction on Ethereum. Once the transaction is included in a block, a json object is returned to the server. It looks like this:

{ blockHash: '0xcd08039bac40e2865886e8f707ce9b901978c339d3abb81516787b0357f53fbd',
  blockNumber: 4611028,
 ...other data...
  transactionHash: '0x12c65523743ed169c764553ed2e0fb2af1710bb20a41b390276ffc2d5923c6a9',
  transactionIndex: 1 }

I need to store the transactionHash into the state of the above component. I have been searching for 2 days and am probably missing something very obvious.

Is this server-side or client-side code? Do I need to learn and use async because of the inherent time delay in talking to Ethereum?

Any help is appreciated!

Thanks

Answer 1

To make the post request, you would have to perform this one the client via the componentDidMount, and then store the response as you would normally. You can find full examples here: https://reactjs.org/docs/faq-ajax.html on the react page.

fetch("https://api.example.com/items")
    .then(res => res.json())
    .then(response => this.setState(response));

You would have to adjust the fetch operation to be a post request but you can find more information related to fetching here: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

fetch("https://api.example.com/items", {
  method: 'POST',
  body: JSON.stringify(data),
  headers:{
    'Content-Type': 'application/json'
  }
})
.then(res => res.json())
.then(response => this.setState(response))
.catch(error => console.error('Error:', error));

Edit (example with Axios):

componentDidMount() {
    axios.get("https://api.example.com/items")
      .then(res => {
        const items = res.data;
        this.setState(items);
      })
  }