Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

233
Vistas
ReactJS not updating state google map autocomplete fields

I have integrated google map auto-completed, it's working well, even i have console logged, every data is appearing as expected but the problem is, when i select, it doesn't update the state

Here you go for my component

import Autocomplete from "react-google-autocomplete";

const TestForm = () => {
    const [profile, setProfile] = useState({});

    const onPlaceSelected = (place) => {
      console.log(place)
      setProfile({...profile, "test": "test"})
      console.log(profile, )
    };

    const handleProfileChange = (e) => {
        setProfile({...profile, [e.target.name]: e.target.value})
      };

  
  return (
    <>
      
    <input onChange={handleProfileChange} type="text"></input>

    <Autocomplete
        apiKey="apikey"
        defaultValue={formData.profile.location || ""}
        onPlaceSelected={onPlaceSelected}
        />
                            
    </>
  );
};

You may notice, i used two different method to update state, one for general input fields and another for autocomplete lib, but general input field state is updateing but autocomplete state is not updating, i have console logged the place, i see it is appearing, only problem is when i select a location, the selected location doesnt add my state, what is the issue? why it's behaving so weirds? can anyone help me?

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

You cant log the state right after you updated it, because it's async. Try logging the state change in useEffect hook

const [profile, setProfile] = useState({});

const onPlaceSelected = (place) => {
  console.log(place)
  setProfile({...profile, "test": "test"})
};

useEffect(() => { console.log(profile) }, [profile])
about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda