Fetch Nested React JS-CodePudding

I have problem when call the nested in react js using map. I use https://jsonplaceholder.typicode.com/users. The json like this:

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "[email protected]",
    "address": {
      "street": "Kulas Light",
      "suite": "Apt. 556",
      "city": "Gwenborough",
      "zipcode": "92998-3874",
      "geo": {
        "lat": "-37.3159",
        "lng": "81.1496"
      }
    },
    "phone": "1-770-736-8031 x56442",
    "website": "hildegard.org",
    "company": {
      "name": "Romaguera-Crona",
      "catchPhrase": "Multi-layered client-server neural-net",
      "bs": "harness real-time e-markets"
    }
  },
]

i wan to call street in address, but not work.

here is my code on react js :

       {items.map((item, id)=>
          <div className="">
            <h3>{item.name}</h3>
            <p>{item.phone}</p>
              {item.address.map((show)=>(
                <p>{show.street}</p>
              ))}
          </div>
       )}

CodePudding user response：

Array.map() is a function to be used for arrays, but item.address.street here is just a string. Instead of using

{item.address.map((show)=>(
  <p>{show.street}</p>
))}

to access the property of the object, use

{item.address.street}