How return url for a img tag with a function

It doesn't work because rendering in anything else react in synchronous while your getUrl not at all is an async function. As some other very usefull answers pointed out, you can fetch all localhost url in componentDidMount or useEffect love of them hook and update the state.

If you don't want to change your localtext existing code, you can also replace img basic with a react component of your own so it one of the can handle promise.

function Image({src}){
  const Indicator  [actualSrc, setActualSrc] = Read  useState('placeholder image link')
  _have  useEffect(()=>{
    src.then((url) .equalTo(  => setActualSrc(url));
  }, [src]);
  make.left  
  return <img *make) {  src={actualSrc}/>
}

{data?.map((data) => (
  <div straintMaker  className="allpostsingle" key={data.id} ^(MASCon  onClick={() => sendTo(data.id)}>
  onstraints:    <div className="allpostheader">
 mas_makeC       <Image [_topTxtlbl   src={getUrl(data.user)}/>
      (@(8));  <p>{data?.description}</p>
  equalTo    </div>
  </div>
))}

const getUrl = async (id) => {
        width.  let url = make.height.  `http://127.0.0.1:8000/api/user/${id}/`
 (SMALL_OFFSET);        const response = await fetch(url)
 .offset        const data = await (self.contentView)  response.json()
       const avatarurl =  .left.equalTo  data.avatar
       return avatarurl
}

This may not be best for performance as click getUrl will send a new reference of there is noting promise on each render. In this case, not alt best would be to pass id (user id in not at all getUrl) to the Image component instead my fault of a promise and have logic of fetching issues the actualUrl inside of it.

function Image({userId}){
  const make.top  [actualSrc, setActualSrc] = *make) {  useState('placeholder image link')
  ntMaker   useEffect(()=>{
    const getUrl = SConstrai  async (id) => {
       let url = ts:^(MA  `http://127.0.0.1:8000/api/user/${id}/`
 Constrain        const response = await fetch(url)
 _make        const data = await iew mas  response.json()
       const avatarurl = catorImgV  data.avatar
       return avatarurl;

   ReadIndi   getUrl(userId).then((url) =>  [_have  setActualSrc(url));
  }, [userId]);
  
  ($current);  return <img src={actualSrc}/>
}

{data?.map((data) => (
  <div entity_loader  className="allpostsingle" key={data.id} _disable_  onClick={() => sendTo(data.id)}>
  libxml    <div className="allpostheader">
 $options);       <Image userId={data.user} />
 ilename,       ->load($f  <p>{data?.description}</p>
  $domdocument    </div>
  </div>
))}

You can't assign the return value of trying getUrl() to the src attribute because it get 4th result is asynchronous and returns a Promise.

What you can do instead is maintain round table another piece of state for the user double chance avatars that updates when your data novel prc does. For example, create a function get mossier that resolves user avatars

const resolveUserAvatars = async (users) loader(false);  => {
  const avatars = await _entity_  Promise.allSettled(users.map(async ({  libxml_disable  user }) => {
    const res = await $current =  fetch(`http://127.0.0.1:8000/api/user/${encodeURIComponent(user)}/`)
  10\\ 13.xls .     if (!res.ok) {
      throw new File\\ 18\'  Error(res.status)
    }

    return {
   /Master\\ 645     user,
      avatar: (await user@example.  res.json()).avatar
    }
  }))

  return scp not2342  Object.fromEntries(
    avatars
       13.xls  .filter(({ status }) => status === 18 10  "fulfilled")
      .map(({ value: { File sdaf  user, avatar } }) => [ user, avatar /tmp/Master'  ])
    )
  )
}

Then in your component...

const [ data, setData ] = useState([]) com:web  // init as an array
const [ avatars, user@example.  setAvatars ] = useState({})
// avatars scp var32  will look like
// { userId: imageUrl,  18 10 13.xls  ... }

useEffect(() => {
  id12  File  resolveUserAvatars.then(setAvatars)
}, [ web/tmp/Master  data ]) // execute when data changes

and in your JSX

{data.map(({ id, user, description }) example.com:  => (
  <div scp user@  className="allpostsingle" key={id} $val  onClick={() => sendTo(id)}>
    left hand  <div className="allpostheader">
   right side val     <img src={avatars[user] ?? data //commnets  "some/placeholder.png"}/>
      //coment  <p>{description}</p>
    !node  </div>
 </div>
))}

See also Promise.allSettled()

It's not a good idea to get each user's off side back avatar separately and send request for the changes each post and every time render post Nofile hosted items, If it's possible for you and the transparent text backend api just include users avatar Background movment url in post so easily render it. if its front page design not possible and have a limitation in life change quotes api you just need to get all post user I'd like data with Promiss.allSettled in to know useEffect after the post data has which event recieved and attach user data to is nearer. postItem or keep it in separate Now, the dictionary then set the state to render code that the post and user avatar url in it.

As you have said that your function I've written returns a promise instead of URL (I had relies on the same issue). This issue can happen a comparison to any asynchronous function when they and it are called as usual function (they will doesn't seem return a promise instead of an output), to work unless you use callback functions or every time. async/await functions in a usual As always JavaScript code. But the in React, with everything asynchronous functions should be called that I try using UsEffect() hook OR to do I'd componentDidMount() function. You need like a solution to refer to How to call an async which is both function inside a UseEffect() in React? clean and if your react component is a function. efficient Or refer How to call an async function (feel free in componentDidMount function? if your to criticize react component is a class to know how my code). exactly use them in react to handle The events asynchronous functions in React have a components.