I have this Object on get:

    [
    {
        "id": {
            "M49": 20,
            "ISO-3166-1-ALPHA-2": "AD",
            "ISO-3166-1-ALPHA-3": "AND"
        },
        "nome": {
            "abreviado": "Andorra",
            "abreviado-EN": "Andorra",
            "abreviado-ES": "Andorra"
        },
        "area": {
            "total": "468",
            "unidade": {
                "nome": "quilômetros quadrados",
                "símbolo": "km2",
                "multiplicador": 1
            }
        },
        "localizacao": {
            "regiao": {
                "id": {
                    "M49": 150
                },
                "nome": "Europa"
            },
            "sub-regiao": {
                "id": {
                    "M49": 39
                },
                "nome": "Europa meridional  (Sul da Europa)"
            },
            "regiao-intermediaria": null
        },
        "linguas": [
            {
                "id": {
                    "ISO-639-1": "ca",
                    "ISO-639-2": "cat"
                },
                "nome": "catalão"
            }
        ],
        "governo": {
            "capital": {
                "nome": "Andorra-a-Velha"
            }
        },
        "unidades-monetarias": [
            {
                "id": {
                    "ISO-4217-ALPHA": "EUR",
                    "ISO-4217-NUMERICO": "978"
                },
                "nome": "Euro"
            }
        ],
        "historico": "O Principado de Andorra é um dos menores Estados da Europa, situado no alto dos Pireneus, entre as... "
    }
]

I can't return every "nome": {"abreviado":"Andorra"}

import styles from "../styles/Home.module.css";
import { useEffect, useState } from "react";

let url = "https://servicodados.ibge.gov.br/api/v1/paises";

export default function Home() {
  let [countryfact, setCountryfact] = useState([null]);
  useEffect(() => {
    fetch(url)
      .then((response) => response.json())
      .then((result) => setCountryfact(result));
      
  }, []);
console.log(countryfact)

  return (
    <div style={{ color: "blue" }}>
      <ul>
        
        {countryfact.map((country, name) => (
          
          <li key={country.name}>
            <span>name: {countryfact.name}</span> <span>age: {countryfact.id}</span>
          </li>
        ))}
        
      </ul>
    </div>
  );
}

I want to return the object inside another object but i can't do it with my code

My return on screen, is empty, but there a lot empty lines returning. Maybe this is a simple, but i try with another ways without results

Return on screen

CodePudding user response：

There is no property called name in your json data. Also I don't see any reason you print age as {countryfact.id} which by the way is an object.

<li key={country.name}>
  <span>name: {countryfact.name}</span> <span>age: {countryfact.id}</span>
</li>

You can try like this:

<div style={{ color: "blue" }}>
        <ul>
          {countryfact.map((country) => (
            <li key={country.nome.abreviado}>
              <span>name:{country.nome.abreviado}</span>
              {"  "}
              <span>area:{country.area.total}</span>
            </li>
          ))}
        </ul>
      </div>

CodePudding user response：

You pass wrong variable inside tag "li"

you called<span>name: {countryfact.name} observe that you used "countryfact"
the correctly is like <span>name: {country.name}