mi entrada es
{ "location": { "name": "name1", "address": "addres1", "phone": "637636***", "facility": "facility1", "lat": //this is lattitude, "lng": //this is longitude }, "distance": 859.2556649163248 }Así es como se está procesando:
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> ) }) }este componente funcional devuelve dos veces el resultado, pero uno tiene un valor y el otro tiene un valor vacío
El problema es que tienes un objeto e intentas hacer un bucle como si fuera una matriz. Dado que el objeto tiene dos miembros, a saber, la location y la distance en el primer nivel, obtiene dos iteraciones. Prueba de concepto:
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});solución rápida
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> ) }) } Fíjese en [ y ] alrededor de nearbyPlace , que están convirtiendo su entrada en una matriz de 1 elemento. Si siempre tendrá un solo elemento, entonces hacer un bucle en entries es innecesario y superfluo, pero es usted quien tiene que determinar si necesita un bucle.