Estoy definiendo dos variables:

 var information; var secondary_information;

Actualizo estas variables dentro de mi función:

 async function fetchInfo() { var num = Math.floor(Math.random() * 20 + 1); const url = `https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${pos.current.coords.latitude},${pos.current.coords.longitude}&radius=12000&type=restaurant&key=${key}`; await fetch(url) .then((response) => response.json()) .then((data) => setSearchResponse(data)) .then(console.log("api request fired.")); let place_id = searchResponse.results[num].place_id; const secondary_url = `https://maps.googleapis.com/maps/api/place/details/json?fields=formatted_phone_number,opening_hours,formatted_address&place_id=${place_id}&key=${key}`; await fetch(secondary_url) .then((response) => response.json()) .then((data) => setsecondarySearchResponse(data)) .then(console.log("secondary api request fired.")); information = { name: searchResponse.results[num].name, open_now: searchResponse.results[num].opening_hours.open_now, rating: searchResponse.results[num].rating, price: searchResponse.results[num].price_level }; secondary_information = { phone_number: secondarySearchResponse.result.formatted_phone_number, daily_hours: secondarySearchResponse.result.opening_hours.weekday_text, address: secondarySearchResponse.result.formatted_address }; }

Cuando consuelo registro las variables desde dentro de la función, funciona según lo previsto.

Estoy tratando de pasar las variables como accesorios a un componente de reacción, pero en su lugar sigue pasando un objeto vacío:

 return ( <div className="App"> <Filters /> <Button variant="primary" onClick={fetchInfo}> Randomizer </Button>{" "} <Result info={information} /> </div> );

Además, no tengo ni idea de si esta es la forma correcta en que debería hacer estas llamadas API y almacenarlas en el estado, pero esta es la forma en que tenía sentido para mí. Cualquier comentario es muy apreciado.