My function returns an object. How to set return value to specific key value in React

I have a function in my react code as so…

  const getLatLngFromAddress = async () => {
    try {
      const response = await Geocode.fromAddress(state.address.address1)
      const { lat, lng } = response.results[0].geometry.location;
      return { lat, lng }
    } catch (err) {
      console.log(err.message)
    }
  }

returns an object. I would like to set my state to only a specific key of the object and not the object itself…

  useEffect(async () => {
    setState({
      ...state,
      address: {
        ...state.address,
        lat: await getLatLngFromAddress().lat,
        lng: await getLatLngFromAddress().lng
      }
    })

  }, []);

useEffect above returns undefined. Is there any way to do this?

>Solution :

You need to read the properties from the value resolved from the promise. Currently you are trying to read them from the promise itself and then awaiting those undefined values.

lat: (await getLatLngFromAddress()).lat,

However, you are calling getLatLngFromAddress twice. Store the values in variables and then reuse them instead.

  useEffect(async () => {
    const latlng = await getLatLngFromAddress()
    setState({
      ...state,
      address: {
        ...state.address,
        ...latlng,
      }
    })

  }, []);