How to serve a HTML + markup string to ReactJS component as a prop?

Question

I'm building a simple slide-deck web app that uses a JSON object as a mock database, and I'm rendering the UI via ReactJS components.

Is there a way to store the HTML + markup in the JSON object as a string, pass the string to ReactJS, and then have ReactJS render the HTML elements/markup in a React Component?

Here is an example of the JSON object:

{
  "slides": {
    "1":{
      "title":"Introductory Finance",
        "content":"<p>By Raymond Arthur</p>"
        }
  }
}

This is the React component:

class Body extends React.Component{
  constructor(props){
    super(props);
  }

  render(){
    return(
      <div className='body'>
         {this.props.content}    
      </div>
    );
  }
}

At the moment, if I pass slides[1].title.content as a prop to a React Component with a <div>, By Raymond Arthur is being rendered as text on the screen (i.e. React is not actually creating  elements with text inside them). It's as though React is escaping the By Raymond Arthur as a text string instead of recognising the HTML markup/elements.

How can I fix this? How can I store HTML + markup as a string in a JSON object or a database, serve the HTML + markup string to ReactJS, and then get ReactJS to recognise that it is HTML and not just a string?

I have seen other SF threads referencing dangerouslySetInnerHTML - is this the only option?

Or ReactDOMServer?

If you want to avoid dangerouslySetInnerHTML, you can use the package react-html-parser — nCardot
– nCardot, Commented Jul 3, 2021 at 4:04

Gulshan Aggarwal · Accepted Answer · 2021-07-03 04:55:00Z

1

To solve this you can use dangerouslySetInnerHTML attribute something like this.It will wrap your markup which is a object property into specified div Tag below.

<div dangerouslySetInnerHTML={{__html:this.props.content}}></div>

answered Jul 3, 2021 at 4:55

Gulshan Aggarwal

1,0091 gold badge10 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

How to serve a HTML + markup string to ReactJS component as a prop?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related