getting a string instead of html returned from function in React

Question

At the top of my gatsby blog (a react component) I have a function that gets a url's extension, and based on whether it's an image or a video it returns a line of html like so:

  const printPicOrVid = function(myUrl) {
    let fileExt =
      myUrl.substring(myUrl.lastIndexOf(".") + 1, myUrl.length) || myUrl
    if (fileExt === "jpg" || fileExt === "png" || fileExt === "gif") {
      return '<img src="https:' + myUrl + '" />'
    } else if (fileExt === "mp4") {
      return '<video src="https:' + myUrl + '"></video>'
    }
  }

which successfully returns a string of something like <img src="https://contentful.com/whatever/image.jpg" />

in my return part of the react page I have:

{edge.node.heroImage && printPicOrVid(edge.node.heroImage.file.url)}

which is saying: if the heroImage from contentful exists, then return the jpg or mp4 html. The problem is, I just get a string of the HTML printed to the page, not the html rendering an actual image or video like intended.

have a feeling the answer here is dangerously set inner HTML, but not sure how to implement. Any help much appreciated, thanks.

Actually yeah, Ismael's is a better idea. Just return the JSX img or video element, and make the src the dynamic string, rather than the whole element a string — Jayce444
– Jayce444, Commented Jan 22, 2020 at 0:00

Ismael Padilla · Accepted Answer · 2020-01-21 23:58:59Z

8

When returning JSX in a function, you should just plainly return the JSX element you want. So you'd write return <div/> instead of return '<div/>'. So:

return '<img src="https:' + myUrl + '" />'

Should be

return <img src={"https:" + myUrl} />

Otherwise you'd return a string instead of JSX. Same in the other return statement, which should be:

return <video src={"https:" + myUrl}></video>

answered Jan 21, 2020 at 23:58

Ismael Padilla

5,6065 gold badges26 silver badges37 bronze badges

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

Comments

Cristian Torres · Accepted Answer · 2020-01-22 00:00:35Z

2

You need to return a <div /> with attribute dangerouslySetInnerHTML set to {{ __html: printPicOrVid(edge.node.heroImage.file.url) }}.

Full code:

{edge.node.heroImage && <div dangerouslySetInnerHTML={{ __html: printPicOrVid(edge.node.heroImage.file.url) }} />}

answered Jan 22, 2020 at 0:00

Cristian Torres

2063 silver badges12 bronze badges

1 Comment

StephD Over a year ago

Thank you! I figured I should avoid dangerouslySetInnerHTML if possible though so I went with Ismael's solution, appreciate the answer though.

Collectives™ on Stack Overflow

getting a string instead of html returned from function in React

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related