How to use async javascript inside react render

Question

I need to use an async function in my render() function in React. How could I do that? What I am getting now is just a Promise, obviously.

import React, { Component } from "react";

export default class FlagImage extends Component {
  getSrc = async name => {
    const url = `https://restcountries.eu/rest/v2/alpha/${name}`;
    const res = await fetch(url);
    const json = res.json();
    const flagURL = json.flag;
    return flagURL;
  };

  render() {
    const { name } = this.props;

    return name ? <img alt={`Flag ${name}`} src={this.getSrc(name)} /> : <div />;
  }
}

Amit Chauhan · Accepted Answer · 2019-12-23 13:48:50Z

3

Your async function returns promise which can't work with src. You can store that value in state and use it.

import React, { Component } from "react";

export default class FlagImage extends Component {
  state = { imageSrc: "" }
  getSrc = async name => {
    const url = `https://restcountries.eu/rest/v2/alpha/${name}`;
    const res = await fetch(url);
    const json = res.json();
    const flagURL = json.flag;
    setState({imageSrc: flagURL})
  };

  componentDidMount() {
    this.getSrc();
  }

  render() {
    const { name } = this.props;

    return name ? <img alt={`Flag ${name}`} src={this.state.imageSrc} /> : <div />;
  }
}

answered Dec 23, 2019 at 13:48

Amit Chauhan

7,0192 gold badges26 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pat Needham Over a year ago

you beat me to it!

Süleyman GÜNDÜZ · Accepted Answer · 2019-12-23 13:51:23Z

1

You should do that kind of stuff in componentDidMount lifecycle method.

Can you try this.

import React, { Component } from "react";

export default class FlagImage extends Component {

  state = {
   url = '' 
  };
  
  componentDidMount () {
    let url = this.getSrc();
    
    this.setState({
      url
    });
  }

  getSrc = async name => {
    const url = `https://restcountries.eu/rest/v2/alpha/${name}`;
    const res = await fetch(url);
    const json = res.json();
    const flagURL = json.flag;
    return flagURL;
  };

  render() {
    const { name } = this.props;

    return name ? <img alt={`Flag ${name}`} src={this.state.url} /> : <div />;
  }
}

answered Dec 23, 2019 at 13:51

Süleyman GÜNDÜZ

1952 silver badges15 bronze badges

Comments

akhtarvahid · Accepted Answer · 2019-12-23 13:51:58Z

1

Call that function inside lifecycle method

componentDidMount(){
  this.getSrc(); 
}

answered Dec 23, 2019 at 13:51

akhtarvahid

9,7992 gold badges30 silver badges33 bronze badges

Collectives™ on Stack Overflow

How to use async javascript inside react render

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related