My input is
{
"location": {
"name": "name1",
"address": "addres1",
"phone": "637636***",
"facility": "facility1",
"lat": //this is lattitude,
"lng": //this is longitude
},
"distance": 859.2556649163248
}
This is how it is being processed:
function Turup() {
return Object.entries(nearbyPlace).map(([key, value], i) => {
return (
<div>
<ul key={key}>
<li className='font-bold'>name :</li>
<li>address : </li>
<li>phone : </li>
<li>facility : </li>
<li>latitude : </li>
<li>longitude : </li>
</ul>
</div>
)
})
}
this functional component return twice result, but one has a value and the other has an empty value
The problem is that you have an object and you try to loop it as if it was an array. Since the object has two members, namely location and distance on the first level, you get two iterations. Proof-of-concept:
var nearbyPlace = [{
location: {
name: "name1",
address: "addres1",
phone: "637636***",
facility: "facility1",
lat: 123,
lng: 456
},
distance: 859.2556649163248
}]
function Turup() {
return Object.entries(nearbyPlace).map(([key, value], i) => {
return (
`<div>
<ul key=${key}>
<li className='font-bold'>name :</li>
<li>address : ${value.location.address}</li>
<li>phone : ${value.location.phone}</li>
<li>facility : ${value.location.facility}</li>
<li>latitude : ${value.location.lat}</li>
<li>longitude : ${value.location.lng}</li>
</ul>
</div>`
)
})
}
let turup = Turup();
console.log({length: turup.length, content:turup});
Quick solution
function Turup() {
return Object.entries([nearbyPlace]).map(([key, value], i) => {
return (
<div>
<ul key={key}>
<li className='font-bold'>name :</li>
<li>address : </li>
<li>phone : </li>
<li>facility : </li>
<li>latitude : </li>
<li>longitude : </li>
</ul>
</div>
)
})
}
Notice the [ and ] around nearbyPlace, those are converting your input into a 1-element array. If you will always have a single element, then doing a loop on entries is unnecessary and superfluous, but it is you who has to determine whether you need a loop.