Looping over an object that is within a another object - html

Question

So I was working on this name card generator app. https://jsonplaceholder.typicode.com/users is the source of my database.
Any idea how to loop through the address part? My code so far.
import React, {useState, useEffect} from 'react';
import Namecard from './namecard'
function App() {
const [identis, setIdenti]=useState([]);
useEffect(()=>{
getIdenti()
},[]
);
const getIdenti = async()=>{
const acquired = await fetch(`https://jsonplaceholder.typicode.com/users`)
const data = await acquired.json()
setIdenti(data)
}
return (
<div>
{identis.map(identi=>(
<Namecard
name={identi.name}
email={identi.email}
address={identi.address}
/>
))}
</div>
)}
export default App

Answer 1

I think maybe you're going for something along these lines. Just to at least answer the question - here is how you would loop through the address. And I'm guessing you're trying to build up a readable string or something...
var users = [
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere#april.biz",
"address": {
"street": "Kulas Light",
"suite": "Apt. 556",
"city": "Gwenborough",
"zipcode": "92998-3874",
"geo": {
"lat": "-37.3159",
"lng": "81.1496"
}
}
}
];
var addressStr = '';
for (var user of users) {
addressStr = '';
for (var key of Object.keys(user.address)) {
key !== 'geo' && (addressStr += user.address[key] + ' ');
}
console.log(addressStr);
}

Answer 2

instead of looping through address part, just build a separate Address component.
const Address = ({ street, suite, ... }) => <h1>Street: {street}</h1>
const Namecard = ({ name, ..., children }) => <div> Name: {name} <div>{children}</div></div> // where children is the Address component
<Namecard
name={identi.name}
email={identi.email}
>
<Address {...identi.address} />
</Namecard>