How to list with HTML some data coming from Smart Contract in a DApp-Frontend

Question

I have DApp with a Smart Contract which is holding some offers (id, price, owner etc.). I want to show that offers in my DApp-Frontend.

First I am calling the Smart Contract and fetching all offers into an array with JavaScript:

// Load offers
      for (var i = 1; i <= offerCount; i++) {
        const offer = await contract.methods.offers(i).call()
        this.setState({
          offers: [...this.state.offers, offer]
        })
      }

Then I want to show the content of that array in a table:

                <table className="table">
                  <thead>
                    <tr>
                      <th scope="col">#</th>
                      <th scope="col">Price</th>
                      <th scope="col">Owner</th>
                      <th scope="col"></th>
                    </tr>
                  </thead>
                  <tbody>
                    {
                      this.props.offers.map((offer, key) => {
                        return (
                          <tr key={key}>
                            <th scope="row">{offer.id.toString()}</th>
                            <td>{this.state.offers}</td>
                          </tr>
                        )
                      })
                    }
                  </tbody>
                </table>

I am getting the error TypeError: Cannot read property 'map' of undefined

I don't know how to show the data properly on the table.

Library: React

OS: XUbuntu

Browser: Chrome

Answer 1

TypeError: Cannot read property 'map' of undefined

This error is because this.props.offers is undefined.

You have to use this.state.offers, I think.

                {
                  this.state.offers.map((offer, key) => {
                    return (
                      <tr key={key}>
                        <th scope="row">{offer.id.toString()}</th>
                        <td>{this.state.offers}</td>
                      </tr>
                    )
                  })
                }