0

I'm working on an app that might receive a string like this from the back end,

If you could fold a piece of paper in half 50 times, its' thickness will be 3/4th the distance from the Earth to the Sun.

as you see the string is not pure English and might contain code, how to display this to the users? like is there is any Npm package that might handle this for me?

kyrolos magdy
  • 393
  • 1
  • 4
  • 19

1 Answers1

1

You can use dangerouslySetInnerHTML for your tag while displaying the string with special characters.

Check this sandbox

Edit loving-fermat-8f0ey4

As @Florian Sc mentioned in the comments, we need to be careful while using this.

react-html-parser is the alternative package which does the same thing. It does not use dangerouslySetInnerHTML in the background, it uses htmlparser2.

mc-user
  • 1,769
  • 4
  • 14
  • 25
  • 2
    Please make sure that you understand the security issues of dangerouslySetInnerHTML. If some visitors can add custom code, they can cause big damage for other visitors. – Florian Sc May 01 '22 at 14:21
  • 1
    @FlorianSc Thank you. I was about to add that and you mentioned it. Edited my answered as well – mc-user May 01 '22 at 14:27
  • Thanks Guys, I found this one and it worked for me: https://stackoverflow.com/a/67688339/10287480 – kyrolos magdy May 01 '22 at 14:51