ReactJs: How to replace html and string template with a component?

Question

I want to manage the content of the page from a content editor where I am getting page content from the API.

Check this screenshot.

I used two different react modules for this react-html-parser and react-string-replace but it is still not working.

Here is my code.

let pageData = '';

pageData = ReactHtmlParser(page.content);

// replacing contact us form with a contact us form component
pageData = reactStringReplace(pageData, '{CONTACT_US_FORM}', (match, i) => (
    <ContactUsForm />
));

return <div>{pageData}</div>;

react-html-parser -> It is used to parse HTML tags which are in string format into tree of elements.

react-string-replace -> It is used to replace a string into react a component.

Note: If I use react-html-parser or react-string-replace individually then it works fine but it does not work together.

Any suggestion?

Check the react-string-replace documentation to see if you are using the API correctly. What does ReactHtmlParser() return? Is it a tree of elements? Does react-string-replace work on a tree of elements? What is {pageData} at the end of your code snippet supposed to do? Is this inside a React component? — Martin
– Martin, Commented Nov 28, 2021 at 8:20
Hi @Martin, I updated the question. ReactHtmlParser returns tree of elements and react-string-replace does not work with it. Either I need a different module that supports this or needs to do some modifications in the same code. — Mohd Shahid
– Mohd Shahid, Commented Nov 28, 2021 at 8:40

Martin · Accepted Answer · 2021-11-28 12:52:44Z

2

Depends on the expected structure of page.content. If it contains HTML you are right in using react-html-parser, which has a replace option.

import parse from 'html-react-parser';
const macro = '{CONTACT_US_FORM}';
const replaceContactUsForm = (domhandlerNode) => {
  if (domhandlerNode.type === 'text' && domhandlerNode.data.includes(macro))
    return <ContactUsForm />;
};
// ...
const elements = parse(page.content, { replace: replaceContactUsForm });
return <div>{elements}</div>;

Additionally, If the string {CONTACT_US_FORM} is embedded in text you could use react-string-replace to keep the rest of the text intact:

const replaceContactUsForm = (domhandlerNode) => {
  if (domhandlerNode.type === 'text' && domhandlerNode.data.includes(macro))
    return <>{reactStringReplace(domhandlerNode.data, macro, () => (<ContactUsForm />))}</>;
};

If page.content does not contain HTML you do not need react-html-parser. But judging from your screenshot some markup is probably contained.

answered Nov 28, 2021 at 12:52

Martin

6,2682 gold badges28 silver badges49 bronze badges

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

1 Comment

user1032752 Over a year ago

Looks like react-html-parser is no longer maintained but this html-react-parser seems to be a promising alternative.

Collectives™ on Stack Overflow

ReactJs: How to replace html and string template with a component?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related