Drizzle component returns BigNumber

Question

I am using the following Drizzle (Truffle) component to call a function from a smart contract:

<ContractData contract="Market" method="priceOf" methodArgs={this.props.id}/>

The result is a React Element that contains number in Wei: 4000000000000000

Now, I am saving this in the state, and this is rendered when this.state.price is rendered. However, when I want to pass {this.state.price} as props price={this.state.price}, it does not work, the error message is that the React element can't be cloned.

Is there any way to get/parse/query/copy the raw data of the React Element? I need that 4000000000000000 as a number (Number() and parseInt() are giving NaN, toString() gives [object Object])

Answer 1

I think what you want to do is move away from the drizzle-react-component ContractData and go back to using drizzle to query contract state.

Using CacheCall to get contract state.

https://truffleframework.com/docs/drizzle/getting-started/contract-interaction.

Answer 2

ContractData returns a jsx-element and not a BigNumber. Just look in the code of ContractData. So requesting the value of the BigNumber which is a string, not a jsx-Element.

So the only way I think is feasable is to hack ContractData an pass it a handler that reads out the BigNumber. For this you need to break the api and add a new prop to it.

The other option is to write you own componet. It seems to be faster that.