How to render html from response into render function in react js

Question

I have been researching a bit and cant seem to come up with a good way of doing this. I have a response that returns something like this:

    "name": "another test",
    "description": "para hacer el aseo",
    "content": "<p>Dear {{customer.firstname}} {{customer.lastname}}, bla bla bla</p>,
    "id": 6

I have the first name and last name from another response. How do I render the html that comes in content and replace the placeholders with the name and last name I have?

Thank you as always any help will be greatly appreciated.

Does this answer your question? [Rendering raw html with reactjs](https://stackoverflow.com/questions/27934238/rendering-raw-html-with-reactjs) — Emile Bergeron, Jul 20 '20 at 03:17
And since you have 2 questions: [string replacement in JavaScript](https://stackoverflow.com/q/377961/1218980) — Emile Bergeron, Jul 20 '20 at 03:18

score 0 · Answer 1 · answered Jul 20 '20 at 03:22

Just replace the content value with your variable then render it with tag dangerouslySetInnerHTML

content = content.replace('{{customer.firstname}}', firstName).replace('{{customer.lastsname}}', lastName)

Render it in raw HTML (not text)

<div dangerouslySetInnerHTML={content} />;

How to render html from response into render function in react js

1 Answers1