Drizzle - accessing array items from a getter

Question

In my contract I have a getter function that returns a full array of addresses:

function getDeployedCampaigns() public view returns(address[] memory) {
    return deployedCampaigns;
}

Using drizzle I have the following code for my component that returns the content of that array:

import React, { Component } from "react";

class ReadCampaigns extends Component {

  state = { dataKey: null};

  componentDidMount() {
    const { drizzle, drizzleState } = this.props;

    const contract = drizzle.contracts.CampaignFactory;

      const dataKey = contract.methods["getDeployedCampaigns"].cacheCall({from: drizzleState.accounts[1], gas: 3000000});

    this.setState({ dataKey });
  }

  render() {
    const { CampaignFactory } = this.props.drizzleState.contracts;

    const campaigns = CampaignFactory.getDeployedCampaigns[this.state.dataKey];
    console.log(campaigns); 
    return <p> Campaigns: {campaigns && campaigns.value}</p>;
  }
}

export default ReadCampaigns;

And the following:

console.log(campaigns);

returns this to the console:

{args: Arguments(0), fnIndex: 3, value: Array(2)}
args: Arguments [callee: (...), Symbol(Symbol.iterator): ƒ]
fnIndex: 3
value: Array(2)
0: "0x6aA54653EEE943cb0a9DF41ee890A9c25f8b9210"
1: "0x2Fc343d40c0a643B30401A0A1788ec6F55e0EdD0"
length: 2
__proto__: Array(0)
__proto__: Object

Now, my expectation was that I would be able to map through campaigns.value, however:

console.log(campaigns.value)

returns undefined.

Seems like I am missing something, because the following statement:

{campaigns && campaigns.value}

produces a list of all addresses as expected, however they are concatenated.

Could somebody kindly explain what I am missing in my thinking process? Thanks

Answer 1

The following works because render is called once before componentDidMount which will initialize the data needed by render. See React docs for more information

    {campaigns && campaigns.value}

You will have to keep track of when your data has been initialized so when it is not initialized you can render an appropriate ...loading... message. The test app for Drizzle React Components does it like this