Fetch data from a smart contract array

Question

I have a factory smart contract that deploys another smart contract.

In the factory contract I have this function

address[] public migrations;

...

function getMigrations() public view returns (address[] memory) {
        return migrations;
    }

after the migration is pushed in this array, I want to display a list of addresses on the first page but I really can't.

This is what I've tried:

import React from "react";
import web3 from "./web3";
import factory from "./factory";
import AccordionExampleStyled from "./components/Acordeon";
import { Card, Button } from "semantic-ui-react";

import 'semantic-ui-css/semantic.min.css'



class App extends React.Component {

  static async getInitialProps() {
    const migration = await factory.methods.getMigrations().call();

    return { migration };
  
  };

renderCampaigns() {
    const items = this.props.migration.map((address) => {
      return {
        header: address,
        description: (
          <Button>See migration</Button>
        ),
        fluid: true,
      };
    });
    return <Card.Group items={items} />;
  }
  render() {
    return (
      
      <div>
      <center>
        <h2>MigrationHelper by DRIVENecosystem</h2>
        <p>
         <p><AccordionExampleStyled /></p>
          <p>List of all migrations </p>
          <p></p>
          {this.renderCampaigns()}
        </p>
       </center>
      </div>
    );
  }
  };
  

export default App;

I got this error: Cannot read properties of undefined (reading 'map')

P.S. I am a newbie in React.js and web3

Edit: I also tried that option, but nothing

import React from "react";
import web3 from "./web3";
import factory from "./factory";
import AccordionExampleStyled from "./components/Acordeon";


import 'semantic-ui-css/semantic.min.css'



class App extends React.Component {

  static async getInitialProps() {
   const migrations = await factory.methods.getMigrations().call();

    return { migrations };
  }
 
   renderMigrations(){
   const items = this.props.migrations.map((migrations) => {return{migrations}});
    return <li>{items}</li>;
} 

  render() {
    return (
      
      <div>
      <center>
        <h2>MigrationHelper by DRIVENecosystem</h2>
        <p>
         <p><AccordionExampleStyled /></p>
          <p>List of all migrations </p>
          <p>{this.props.renderMigrations}</p>

        </p>
       </center>
      </div>
    );
  }
  };
  

export default App;

nima · Accepted Answer · 2021-10-24 07:36:21Z

1

The problem

migrations is not present on the first render. so mapping through it, cause the error.

The Solution

Just need to check the migrations data has arrived and has content before mapping it:

class App extends React.Component {

  static async getInitialProps() {
   const migrations = await factory.methods.getMigrations().call();

    return { migrations };
  }
 
   const renderMigrations = () => {
     return this.props.migrations.map((migration) => {
        return(
           <div>
             <li>{migration.name}</li>)
             <p>{migration.detail}</li>)
           </div>
        )
      })
   } 

  render() {
    const items = this.props.migration;
   
    return (
      
      <div>
      <center>
        <h2>MigrationHelper by DRIVENecosystem</h2>
        <p>
         <p><AccordionExampleStyled /></p>
          <p>List of all migrations </p>
          <p>
             {
               items?.length > 0 && renderMigrations
             }
          </p>
        </p>
       </center>
      </div>
    );
  }
};
 
export default App;

In the renderMigrations method, I used e sample to show the migration detail with li and p elements, since the migrations array does not exist in your question, I just take an example. You should change it with your requirement in the application.

edited Oct 24, 2021 at 7:36

answered Oct 23, 2021 at 15:53

nima

8,99312 gold badges40 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user15809778 Over a year ago

Thank you @novonimo. Can you tell me if this should be the final version? codeshare.io/AdvobN Using this version I still can't see the "migrations": imgur.com/a/H6RrHDm I am sure that the integration with the smart contract is not wrong, because when I use this code [codeshare.io/gL0dlV] I can see element 1 of the string: imgur.com/a/OfViBIQ

nima Over a year ago

I've update my answer right now, please take a look @Paul-ConstantinSocarde

Collectives™ on Stack Overflow

Fetch data from a smart contract array

1 Answer 1

The problem

The Solution

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

The problem

The Solution

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related