CODEWITHSUNDEEP
javascriptreactjsloopsmap-function
Khan Khan
Khan Khan

Reputation: 119

Looping on objects // Error: Objects are not valid as a React child

I have a problem looping on object. I couldn't solve it. Please help me.

I am on a React project to improve my skill and gonna work with React Hooks.

There is a file like below which contains an object. I'm gonna fetch from an api. I wanna to display the object details which i need on the page.

I've tried a lot of way to solve but they didn't work.

I am not adding all the codes what i tried but there is the simple one below which tells my goal. What is the correct solution to iterate on objects in React, JS ..

Thanks in advance.

import React from 'react';

export default function ValueRef() {

    const myList = {
        "location_suggestions": [
          {
            "id": 61,
            "name": "London",
            "country_id": 215,
            "country_name": "United Kingdom",
            "country_flag_url": "https://b.zmtcdn.com/images/countries/flags/country_215.png",
            "should_experiment_with": 0,
            "has_go_out_tab": 0,
            "discovery_enabled": 0,
            "has_new_ad_format": 0,
            "is_state": 0,
            "state_id": 142,
            "state_name": "England and Wales",
            "state_code": "England and Wales"
          },
          {
            "id": 3454,
            "name": "London, ON",
            "country_id": 37,
            "country_name": "Canada",
            "country_flag_url": "https://b.zmtcdn.com/images/countries/flags/country_37.png",
            "should_experiment_with": 0,
            "has_go_out_tab": 0,
            "discovery_enabled": 0,
            "has_new_ad_format": 0,
            "is_state": 0,
            "state_id": 124,
            "state_name": "Ontario",
            "state_code": "ON"
          },
          {
            "id": 5836,
            "name": "London, KY",
            "country_id": 216,
            "country_name": "United States",
            "country_flag_url": "https://b.zmtcdn.com/images/countries/flags/country_216.png",
            "should_experiment_with": 0,
            "has_go_out_tab": 0,
            "discovery_enabled": 0,
            "has_new_ad_format": 0,
            "is_state": 0,
            "state_id": 85,
            "state_name": "Kentucky",
            "state_code": "KY"
          },
        ],
        "status": "success",
        "has_more": 0,
        "has_total": 0,
        "user_has_addresses": true
      }
   
    console.log(myList)

    return (
        <div>{
            Object.values(myList).map((detail)=>(<div>{detail}</div>))
        
        }</div>

    )
}

Error: Objects are not valid as a React child (found: object with keys {id, name, country_id,
country_name, country_flag_url, should_experiment_with, has_go_out_tab, discovery_enabled,
has_new_ad_format, is_state, state_id, state_name, state_code}). If you meant to render a collection
of children, use an array instead.

Upvotes: 0

Views: 86

Answers (1)

tsamridh86
tsamridh86

Reputation: 1496

This is because you are iterating over nested objects, that needs to be treated differently.

Oversimplifying your object, it is something like this :

const myList = {
        "location_suggestions": [ ...objects ],
        "status": "success",
        "has_more": 0,
        "has_total": 0,
        "user_has_addresses": true
      }

Now, when you do :

Object.values(myList).map((detail)=>(<div>{detail}</div>))

As you can see in your first iteration itself, the detail object contains an array, which is a type of object, that cannot be kept in a React render return.

There are 2 solutions to your problem,

  1. Remove / skip the location_suggestions key to avoid the error.
  2. Create a seperate iteration logic for location_suggestions

Upvotes: 1

Related Questions