Uncaught Error: Objects are not valid as a React child , If you meant to render a collection of children, use an array instead

Question

I am trying to show a nested json object using primereact. I am able to show the fields which are straightforward. But when i am getting a nested json i am getting exception of ,

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

Let me post the json object which i a getting

 "content":[
  {
     "storeId":1028490,
     "storeNumber":"0032965",
     "name":"7-ELEVEN STORE",
     "description":null,
     "type":"I",
     "status":"A",
     "address1":"7001 DALE BLVD",
     "address2":null,
     "city":"DALE CITY",
     "county":"PRINCE WILLIAM",
     "state":"VA",
     "country":"VA",
     "postalCode":"22193",
     "siteId":null,
     "sitePartyId":null,
     "partySiteId":null,
     "lePartyId":null,
     "cvid":null,
     "vru1":null,
     "vru2":null,
     "armoredCourierFlag":true,
     "depositoryAccount":{
        "bdDepositoryAccountId":1027474,
        "accountNumber":"00003750269169",
        "bankInfo":{
           "bdBankInfoId":1027121,
           "bankRefCode":"110035",
           "bankCode":"59",
           "bankName":"BANK OF AMERICA N.T. AND S.A.",
           "addressLine1":"TX1-492-10-01",
           "addressLine2":null,
           "city":"DALLAS",
           "state":"",
           "zipCode":"75202-2911"
        },
        "transitRoutingNumber":111000012,
        "accountType":"SP",
        "accountDescription":"MD RENT ACCT",
        "accountOpenedOn":"1993-09-27",
        "accountClosedOn":null,
        "prenoteFlag":"N",
        "prenoteDate":null,
        "wireRoutingNumber":null,
        "comments":null
     },
     "armoredCourier":{
        "bdArmoredCourierId":3,
        "armoredCourierName":"Loomis"
     },
     "courierBranch":{
        "bdCourierBranchId":34,
        "courierBranchName":" Ontario - B0304"
     },
     "courierBranchAddress":{
        "bdCourierBranchAddrId":1028489,
        "address1":"add2",
        "address2":"add2",
        "city":"asd",
        "state":"dasd",
        "postalCode":"dq",
        "courierBranchId":null,
        "createdBy":null,
        "lastModifiedBy":null,
        "createdOn":"2020-08-19T12:38:23.33286Z",
        "lastModifiedOn":null
     },
     "cashVault":{
        "bdCashVaultId":59,
        "cashVault":"Austin"
     },
     "cashVaultAddress":null
  },
  {

I am using a DataTable like below

<DataTable
       value={storeDepositoryList}
       style={{ width: "auto" }}
       emptyMessage="No Records Found">

      <Column field="storeNumber" header="Store Number" sortable={true} />
      <Column field="bankName" header="Bank Name" sortable={true} />
      <Column field="postalCode" header="Store Zip Code" sortable={true} />
      <Column field="armoredCourier" header="Armored Courier" sortable={true} />
      <Column field="courierBranch" header="Courier Bank" sortable={true} /> 
      <Column field="cashVault" header="Cash Vault" sortable={true} /> 
      
       </DataTable>

I am able to show the store number & postal code . But when it is coming to bankName,armoredCourier,courierBranch,cashVault I am getting the mentioned exception. I don't know how to show the objects in the DataTable .Please help .Thanks in advance.

Answer 1

This could be because you are rendering multiple children without a shared node. Try wrapping Column in a React Fragment:

<DataTable
       value={storeDepositoryList}
       style={{ width: "auto" }}
       emptyMessage="No Records Found">
  <>
    <Column />
    <Column />
    <Column />
  </>
</DataTable>