Creé dos funciones createCardNote La primera extrae información de datos de state.countries La segunda es de state.borders

en createCountryCardNode, console.log(cardDiv) tiene valor, por lo que se puede ver en la consola

Sin embargo, createBorderCardNode, console.log(borderDiv) no tiene ningún valor

Ambos códigos son iguales, ¿por qué tiene resultados diferentes?

 function createCountryCardNode(country) { const cardDiv = document.createElement('div'); cardDiv.className = 'country'; cardDiv.innerHTML = ` <img class="country__img" src="${country.flag}" /> <div class="country__data"> <h3 class="country__name">${country.name}</h3> <h4 class="country__region">${country.region}</h4> <p class="country__row"><span>👫</span>${country.population}</p> <p class="country__row"><span>🗣️</span>${country.languages[0].name}</p> <p class="country__row"><span>💰</span>${country.currencies[0].name}</p> </div>`; console.log(cardDiv); return cardDiv; } function createBorderCardNode(border) { const borderDiv = document.createElement('div'); borderDiv.className = 'country'; // console.log(border.flags.svg); // console.log(border.name.common); // console.log(border.region); // console.log(border.population); // console.log(border.languages[0].name); borderDiv.innerHTML = ` <img class="country__img" src="${border.flags.svg}" /> <div class="country__data"> <h3 class="country__name">${border.name.common}</h3> <h4 class="country__region">${border.region}</h4> <p class="country__row"><span>👫</span>${border.population}</p> <p class="country__row"><span>🗣️</span>${border.languages[0].name}</p> </div> `; console.log(borderDiv); return borderDiv; }