Как перечислить с HTML некоторые данные, поступающие из смарт-контракта, в DApp-Frontend

Question

У меня есть DApp со смарт-контрактом, в котором содержатся некоторые предложения (идентификатор, цена, владелец и т. Д. c.). Я хочу показать эти предложения в моем DApp-Frontend.

Сначала я вызываю смарт-контракт и извлекаю все предложения в массив с 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]
        })
      }

Затем я хочу показать содержимое этого массива в таблице:

                <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>

Я получаю сообщение об ошибке TypeError: не удается прочитать свойство 'map' неопределенного

Я не умеют правильно отображать данные в таблице.

Библиотека: React

ОС: XUbuntu

Браузер: Chrome