reactjs - How to set state of a react component with a specific item from a returned json object?

Question

This is a follow up question to the previous thread

How to return json data to a react state?

My react component makes an axios.post to an express server. The server uses web3 to sign a transaction onto Ethereum. Ethereum returns the following json object. Of note is that it takes some time (seconds to minutes depending on the miners) for the json to be returned:

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

Here is the code I am using to make the axios.post and set the state:

import React from "react";
import PaypalExpressBtn from "react-paypal-express-checkout";
import axios from "axios";

export default class Pay extends React.Component {

constructor(props) {
 super(props);
 this.state = {
  items: {}
  };
 }

  render() {
    const onSuccess = payment => {
      axios
        .post("http://compute.amazonaws.com:3000/", {
          value: this.props.value,
          fileName: this.props.fileName,
          hash: this.props.hash
        })
        .then(response => console.log(response.data))
        .catch(function(error) {
          console.log(error);
        });

      console.log(payment);
    };

    let env = "sandbox"; // you can set here to 'production' for production
    let currency = "USD"; // or you can set this value from your props or state
    let total = 3.33; // same as above, this is the total amount (based on 

    const client = {
      sandbox:
        "...key...",
      production: "YOUR-PRODUCTION-APP-ID"
    };

    return (
      <div>
        <PaypalExpressBtn
          onSuccess={onSuccess}
        />
      </div>
    );
  }
}

When I console.log({ items: this.state.items}) I am returned a seemingly endless array of contructors and props.

I have tried

this.setState({ items : items.transactionHash }); and console.log( { items: this.state.items.transactionHash}), neither worked.

What I need to do is set.state with only the transactionHash from the above json and nothing else.

Thanks much!

Answer 1

axios.post(
    "http://compute.amazonaws.com:3000/users", 
    {
        value: this.props.value,
        fileName: this.props.fileName,
        hash: this.props.hash
    }
)
.then(res => {
    const items = res.data;
    const { transactionHash } = items;
    this.setState({ 
        items: {
            transactionHash
        }
    });
});