React / API Call

[kaflenitish]

I have API call but the data that I have is sending hard coded html tags to the browser and the browser is not able to render it.

Any way to solve this? I tried JSON.stringify and JSON.parse but none worked.

Pretty new to react!

What I have:

What API has:

[Exotic]

Hi! Can you send the source code if possible? Its hard to understand whats going on when you send a screenshot .

[kaflenitish]

So basically I was receiving hard coded html tags from the API which was not rendered by React.

After few poking around, i was able to fix it using dangerouslySetInnerHTML although I don’t think that would be recommended!

  return (
    <div>
      <div>
        <div>
          <h2>{videoList.title}</h2>
          <div
            dangerouslySetInnerHTML={{ __html: `${videoList.description}` }}
          />
          <br />
        </div>
        <img src={videoList.thumbnail_large} />
      </div>
      );
    </div>
  );
};

[jenovs]

@kaflenitish

dangerouslySetInnerHTML

It’s ok to use it if the data you’re setting is not provided by some random user. If the data comes from your CMS it’s fine, if it comes from a comment box on your site be ready for script injection attacks .

[lasjorg]

I don’t see <br> tags in the description when I look at the Vimeo API response for that video, just new lines \n. Are you not using the Vimeo API? It looks more like the description you have is from scraping the page.

Anyway, I’m not sure how they sanitize the description but I’m guessing they know what they are doing. However, relying on that might be less than ideal. I would definitely suggest using the official API if you are not and just replacing the new lines with br tag yourself (or use block-level elements for each text).