Render HTML entities inside a string in React

Question

I'm facing issue while displaying curly quotes HTML entities in React JS. Ref straight and curly quotes

    render() {
      return (
              <h4>
              {theme == 'blue' && 'This is sample text'}
              {theme == 'red' && 'What&rsquo;s your role in this project'}
              </h4>
            )
         }

Current Output

What’s your role in this project

Expected Output
What’s your role in this project

I don't want to use dangerouslySetInnerHTML or i don't want to define these values in react state property. Thanks in advance.

Answer 1

Using the String.fromCharCode method:

Check React docs : https://shripadk.github.io/react/docs/jsx-gotchas.html

MDN Docs: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/fromCharCode

To Find the char code: http://www.mauvecloud.net/charsets/CharCodeFinder.html

render() {
          return (
                  <h4>
                  {theme == 'blue' && 'This is sample text'}
                  {theme == 'red' && `What ${String.fromCharCode(8217}s your role in this project`}
                  </h4>
                )
             }

template literals `` for the text

render() {
          return (
                  <h4>
                  {theme == 'blue' && 'This is sample text'}
                  {theme == 'red' && `What’s your role in this project`}
                  </h4>
                )
             }

Using double quotes and single quotes

render() {
          return (
                  <h4>
                  {theme == 'blue' && 'This is sample text'}
                  {theme == 'red' && "What’s your role in this project"}
                  </h4>
                )
             }

Use escape character

 return (
                  <h4>
                  {theme == 'blue' && 'This is sample text'}
                  {theme == 'red' && 'What \’s your role in this project'}
                  </h4>
                )
             } 

Answer 2

If you really can't use " or template strings, try returning a fragment

<>What&rsquo;s your role in this project</>