Getting information before Component is rendered but cannot use getInitialProps ReactJS

Question

I have some code below. I need to get information via a call after web3 is injected by metamask but just before it renders but I cannot use getInitialProps as it will fail because of server side rendering. Not really sure how to design this.

class CampaignIndex extends Component {

async componentDidMount() {
    const accounts = await web3.eth.getAccounts();
    const campaigns = await factory.methods
    .getCampaigns("0x0000000000000000000000000000000000000000", 0)
    .call({
        from: accounts[0]
    });

    console.log(campaigns["completedCampaigns"]);
    console.log(campaigns["ongoingCampaigns"]);

    return { campaigns };
}

render() {
    return <div>{this.props.campaigns["completedCampaigns"][0]}</div>
 }
}

export default CampaignIndex;

Error: TypeError: Cannot read property 'completedCampaigns' of undefined

Answer 1

i think its better to use setState . The way you use props in not the proper way to use them.

async componentDidMount() {
 const accounts = await web3.eth.getAccounts();
 const campaigns = await factory.methods
 .getCampaigns("0x0000000000000000000000000000000000000000", 0)
 .call({
    from: accounts[0]
 });

 console.log(campaigns["completedCampaigns"]);
 console.log(campaigns["ongoingCampaigns"]);

 this.setState({
   campaigns:campaigns
 })
}

render() {
 return <div>{this.state.campaigns["completedCampaigns"][0]}</div>
}