How To Render Value In Promises On Button Click In React?

I have two modules App.jsx import React from 'react'; import ReactDOM from 'react-dom'; import {accounts} from './contract.jsx'; class App extends React.Component{ constructo

Solution 1:

This is a little hacky, but you could try changing your constructor and render functions to:

constructor(props) {
  super(props);
  this.state = {
    'text': '',
    'accounts': null,
    'clicked': false
  };
}

...

render() {
  return(
    <div>
      { this.state['accounts'] ? (
          <div align="center">
            <Button name="get all Accounts" action={this.buttonAction}/>
            {this.state.clicked ? <div>{this.state.accounts}</div>:null}
          </div>
        ) : null 
      }
    </div>
  )
}

When the componentDidMount function does fire it should trigger a re-render. To store the value returned by the promise simply do the following in contract.jsx:

letaccounts = () => {
  return web3.eth.getAccounts()
    .then( function(result) {
      return result; // Or it could be result.data, it depends
    }).catch( function(error) {
      console.error(error.message)
    });
}