I am developing a webapp using ethereum blochchain and ReactJS. In a page, inside componentDidMount() I collect data from blockchain and add it to an array named requests I tried to render components based on the elements of the requests using following code : But this error occurs How to fix this? RequestRow…

Cannot render components by mapping object ReactJS

I am developing a webapp using ethereum blochchain and ReactJS. In a page, inside componentDidMount() I collect data from blockchain and add it to an array named requests

typeof(requests) : object


console.log(requests) :(2) [Result, Result] 
0: Result
   0: "Title"
   1: "100000000000000"
   2: "0xbA439F3C91bF0732e5546721A09be207f69555ca"
   3: false
   4: "0"
   approvalCount: "0"
   complete: false
   description: "Title"
   recipient: "0xbA439F3C91bF0732e5546721A09be207f69555ca"
   value: "100000000000000"
   __proto__: Object
1: Result
   0: "New Request"
   1: "4000000000000000000"
   2: "0x8104Ce1f3d731A5C39501fddDdc14E2673555555"
   3: false
   4: "0"
   approvalCount: "0"
   complete: false
   description: "New Request"
   recipient: "0x8104Ce1f3d731A5C39501fddDdc14E2673555555"
   value: "4000000000000000000"
   __proto__: Object
length: 2
__proto__: Array(0)

I tried to render components based on the elements of the requests using following code :

     <body>
              {this.state.requests.map((request, index) => {
            return (
              <RequestRow
                key={index}
                id={index}
                address={this.state.address}
                request={request}
                approversCount={this.state.approversCount}
              />
            );
          })}
            </body>

But this error occurs

Error: Objects are not valid as a React child (found: object with keys {id, address, request, approversCount}). If you meant to render a collection of children, use an array instead.

How to fix this?

RequestRow is not complete

It’s implemented as

import React from "react";

const requestRow = (props) => <div>{props}</div>;

export default requestRow;

Answer

You dont need to write the code for empty array condition. You just need to write,

  <body> {
    this.state.requests.map((request, index) => {
        return ( <RequestRow key = {
                index
            }
            id = {
                index
            }
            address = {
                this.state.address
            }
            request = {
                request
            }
            approversCount = {
                this.state.approversCount
            }
            />
        );
    });
}</body>

Advertisement

Answer