Return JSX from async arrow function

Question

It must be basic but please help me understand why this doesn't work.

When I write a normal arrow function and return jsx, it works. But, when I use async/await request with the same arrow function to return jsx, it fails.

Edit:

Actually I have to show profile images of users inside a list view. So, I am calling this function to retrieve the images of the respective users inside my render() {return } block

This works

handleProfilePhoto = firstName => {
        return (
            <img
                className="comment-img"
                src={require("../../../../Webroot/images/dashboard/image3.png")}
                alt={firstName + " profile"}
            />
        );
    };

And this doesn't

handleProfilePhoto = async (firstName) => {
        let err = false;

        await Axios
            .get(MY_URL)
            .then(function () {
                err = false;
            })
            .catch(function () {
                err = true;
            });

        return err === true ? (
            <img
                className="comment-img"
                src={require("../../../../Webroot/images/dashboard/image3.png")}
                alt={firstName + " profile"}
            />
        ) : (
            <img
                className="comment-img"
                src={require("../../../../Webroot/images/dashboard/image4.png")}
                alt={firstName + " profile"}
            />
        );
    };

`try{ var result = await Axios.get(MY_URL); return your success jsx; } catch(err){ return your err jsx; }` — mahdi mahzouni, Jul 27 '20 at 09:33
definitely split your async request from your render, you should make the call seperate and pass the state into the component — Jason McFarlane, Jul 27 '20 at 09:33
@mahdimahzouni, can you post the proper syntax. If I implement your code after replacing my params, it doesn't work — Chilarai, Jul 27 '20 at 09:38

score 1 · Accepted Answer · answered Jul 27 '20 at 09:38

1

Please do not use .then() with async / await you either use the chainging or the async way.

handleProfilePhoto = async (firstName) => {
        let err = false;
      
        try {
           await Axios.get(MY_URL);
        } catch(err) {
           err = true;
        } 
        return err === true ? (
            <img
                className="comment-img"
                src={require("../../../../Webroot/images/dashboard/image3.png")}
                alt={firstName + " profile"}
            />
        ) : (
            <img
                className="comment-img"
                src={require("../../../../Webroot/images/dashboard/image4.png")}
                alt={firstName + " profile"}
            />
        );
    };

Also, handleProfilePhoto returns an promise.

handleProfilePhoto.then(result => {
   //your result is here
})

answered Jul 27 '20 at 09:38

bill.gates

14,145
3
19
47

I get an error. it says `Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.` – Chilarai Jul 27 '20 at 09:42
@Chilarai where do you import this component – bill.gates Jul 27 '20 at 09:42
Inside `render(){return .....Rest Of The Code... this. handleProfilePhoto(items.firstname)}` like this. I hope this makes sense – Chilarai Jul 27 '20 at 09:45
Actually I have to show profile images of users inside a list view. So, I am calling this function to retrieve the images of the respective users – Chilarai Jul 27 '20 at 09:46
@Chilarai the function returns an promise ,you need to resolve it first – bill.gates Jul 27 '20 at 09:47
1

@Chilarai https://stackoverflow.com/questions/33242378/rendering-react-components-with-promises-inside-the-render-method – bill.gates Jul 27 '20 at 09:49
Ok I will take a look – Chilarai Jul 27 '20 at 09:51

Return JSX from async arrow function

1 Answers1