ReacjJS: Parse HTML from strings and use it

Question

I have a JSON questions.json:

{
  "question1": "This is a <strong>cool</strong> question"
}

In my App.js I do:

import questions from './questions.json'

class App {
  render () {
    return (
        <p>{questions["question1"]}</p>
    )
  }

That displays:

"This is a < strong> cool < /strong> question"

(Notice I escaped "<\strong>" because SO would render "bool" bold otherwise.)

instead of

"This is a cool question"

I can think of writing a recursion that finds each "strong" markup, but I am wondering if a way already exists.

Thanks

Way already exists. Checkout dangerouslySetInnerHTML

Danko
– Danko

2020-03-27 10:43:05 +00:00
Commented Mar 27, 2020 at 10:43 — Danko
– Danko, Commented Mar 27, 2020 at 10:43

Andy · Accepted Answer · 2020-03-27 10:48:40Z

1

Here's a working example using dangerouslySetInnerHTML.

const questions = {
  question1: 'This is a <strong>cool</strong> question'
};

class App extends React.Component {
  render () {
    return (
      <p dangerouslySetInnerHTML={{__html: questions['question1']}} />
    );
  }
}

// Render it
ReactDOM.render(
  <App />,
  document.getElementById("react")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

answered Mar 27, 2020 at 10:48

Andy

63.6k13 gold badges72 silver badges99 bronze badges

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

Comments

Chithambara Kumar · Accepted Answer · 2020-03-27 10:43:49Z

0

You can try using dangerouslySetInnerHTML and check if it works.

 <p dangerouslySetInnerHTML={{ __html: questions["question1"] }} />

answered Mar 27, 2020 at 10:43

Chithambara Kumar

9267 silver badges14 bronze badges

Collectives™ on Stack Overflow

ReacjJS: Parse HTML from strings and use it

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related