How to render HTML Template and bind data from JSON response in ReactJS?

Question

I have to render an HTML template using reactjs. HTML template is dynamic and get through an API call. There is provision in template to bind the data in html. Sample HTML template is as follows,

<a target="_blank" href="{ad.url}">
    <div class="ads temp-1">
        <h2>{ad.name}</h2>
        <div class="adv-content">
            <div class="advs-image">
                <img src="{ad.image}" />
            </div>
            <div class="adv-desc">{ad.description}</div>
        </div>
    </div>
</a>

Here ad is an Object which contains the properties url, image, name, description etc

Sample ad Object is as follows,

var ad = {
    "image": "testimage.jpg",
    "url": "http: //google.com",
    "name": "testadvertisement",
    "description": "testdescription"
}

I have achieved this in AngularJs using, $compile service.

Now I want to move this to reactjs. I have tried to render using reactjs render function, But it didn't help. It renders html as string.

Is there any compile like function in reactjs ? Or could you please suggest any other way to do this right way ?

Any help appreciated.

Is there a reason why you are not already including such templates as .jsx? — moonwave99
– moonwave99, Commented Aug 9, 2016 at 12:41
It should be dynamic. Templates should able to add from admin dashboard. That is why it provided through API — Mohammed Safeer
– Mohammed Safeer, Commented Aug 9, 2016 at 12:44
Then I would either make a POST to /api/render/:templateName with provided data and expect plain HTML back, or use Handlebars / lodash microtemplating, or even something like this. — moonwave99
– moonwave99, Commented Aug 9, 2016 at 12:51

1ven · Accepted Answer · 2016-08-10 09:36:37Z

2

As I correctly undestand you should use dangerouslySetInnerHTML prop.

For example:

// SomeComponent.js

// other methods...

render() {
  // `htmlFromResponse` is your plain html string from response.
  return (
    <div dangerouslySetInnerHTML={{ __html: htmlFromResponse }} />
  );
}

Using this prop, you can render plain html string into div element.

If you are getting html template from server, and want to pass variable to it before rendering, you can do it with Mustache package:

import Mustache from 'mustache';

// template should contain variables in {{ ... }}
const html = Mustache.render(htmlFromServer, {
  variable: 'value'
});

Next, you can render output html using dangerouslySetInnerHTML prop.

edited Aug 10, 2016 at 9:36

answered Aug 9, 2016 at 14:01

1ven

7,0361 gold badge29 silver badges39 bronze badges

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

2 Comments

Mohammed Safeer Over a year ago

Thanks. It will render HTML inside the div. Is there any way to bind the variable in template using { } or {{ }} ?

1ven Over a year ago

@MohammedSafeer, check updated answer, I explained how to render template from server.

abhirathore2006 · Accepted Answer · 2016-08-10 10:56:20Z

0

create a react component which renders the HTML data, then pass your Json data as Prop to the component. this will give React element access to data and Rendered HTML will be automatically updated when Json data changes.

Check out some react tutorial video over youtube, that will give you an overview of how ReactJs works

here is how to Pass Props

https://jsfiddle.net/abhirathore2006/6a403kap/

var Hello = React.createClass({
  render: function() {
  console.log(this.props)
    return <div>Hello {this.props.name}
    <h5>{this.props.d1.name}</h5>
    id:{this.props.d1.id}
    </div>;
  }
});

ReactDOM.render(
  <Hello name="World" d1={{"name":"test","id":"5"}} />,
  document.getElementById('container')
);

answered Aug 10, 2016 at 10:56

abhirathore2006

3,8551 gold badge28 silver badges29 bronze badges

Collectives™ on Stack Overflow

How to render HTML Template and bind data from JSON response in ReactJS?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related