Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

72
Visualizações
Why does this function display twice ReactJS?

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

about 4 years ago · Juan Pablo Isaza
1 Respostas
Responde à pergunta

0

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.

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda