Rendering a returned value from an async function in ReactJS

Question

I am trying to fetch a variable (avatar seed) from a database doing the following function:

async function getProfileData() {
    let response = await post('/getProfileData', {
        name: 'test'
    })

    return response
}

That works completely fine, the problem is that I need this seed to render in an element, but I am not sure how I would do that without the promise returns pending.

This is the element I am trying to add the seed to:

function Example() {
 return (
  <img src={`https://avatars.dicebear.com/api/croodles/${seed}.svg`} alt="Sprite"/>
 )
}

export default Example;

windmaomao · Accepted Answer · 2021-09-11 13:33:26Z

1

There's lots of ways of doing that. I'm showing a basic one.

  function Example() {
    const [seed, setSeed] = useState(null)
    useEffect(() => {
      const s = await getProfileData()
      setSeed(s)
    }, [])

    if (!seed) return null
   
    return <img src={...} />
  }

Here if there's no seed, it'll display nothing instead of a picture.

answered Sep 11, 2021 at 13:33

windmaomao

7,7322 gold badges37 silver badges38 bronze badges

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

Collectives™ on Stack Overflow

Rendering a returned value from an async function in ReactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related