Dynamically return Values from Axios-Request within function

How do I wait and/or build a return with values that come from an API-Call via axios in react?

The problem im Facing is that axios requests are asynchronous. Thats why the return from my code is hit earlier then the response from my request arrives. I’m trying to build Cards from a Weather API (openweathermap) that are returned when you enter certain parameters.

Here is how far I got. Hope you can help me:

function WeatherTile() {

 let data;

const options = {
  method: 'GET',
  url: 'https://api.openweathermap.org/data/2.5/weather',
  params: {
    appid: WEATHER_API_KEY,
    id: '2924585',
    lang: 'null',
    units: '"metric" or "imperial"',
    mode: 'xml, html'
  }
};

axios.request(options).then(function(response) {
    if(response.status == 200){
      mobxInteractionStore.setWeatherdata(response.data); // mobx doesnt work either. Its empty when the html is returned.
      console.log("SUCCESS");
      console.log(response.data);
      data = response.data; // This does not work
    }else {
      console.log(response.status);
    }
  }).catch(function(error) {
    console.error(error);
  });

return (
    <Card style={{ width: '18rem' }}>
      <Card.Img variant="top" src="holder.js/100px180" />
      <Card.Body>
        <Card.Title>{data.weather.description}</Card.Title>
        <Card.Text>
          Some quick example text to build on the card title and make up the bulk of
          the card's content.
        </Card.Text>
        <Button variant="primary">Go somewhere</Button>
      </Card.Body>
    </Card>
);
}

export default (WeatherTile);

102 thoughts on “Dynamically return Values from Axios-Request within function”

  1. Hey! I just wanted to ask if you ever have any issues with
    hackers? My last blog (wordpress) was hacked and I ended up losing many months
    of hard work due to no back up. Do you have any solutions to stop hackers?

    Reply
  2. Howdy this is somewhat of off topic but I was wanting to know if blogs use WYSIWYG
    editors or if you have to manually code with HTML.
    I’m starting a blog soon but have no coding know-how so I wanted
    to get advice from someone with experience. Any
    help would be enormously appreciated!

    Reply
  3. We absolutely love your blog and find nearly all of your post’s to be exactly what I’m looking for.
    can you offer guest writers to write content to suit your needs?
    I wouldn’t mind composing a post or elaborating on a
    number of the subjects you write related to here. Again, awesome website!

    quest bars http://tinyurl.com/49u8p8w7 quest bars

    Reply
  4. Hello there, I discovered your site by way of Google whilst looking for a related matter, your website
    came up, it looks great. I’ve bookmarked it in my google bookmarks.

    Hello there, just turned into aware of your weblog
    via Google, and located that it is truly informative.

    I’m gonna be careful for brussels. I will appreciate in case you continue this in future.
    Numerous folks will probably be benefited out of your
    writing. Cheers! scoliosis surgery https://coub.com/stories/962966-scoliosis-surgery scoliosis surgery

    Reply

Leave a Comment