Insert React component into a String variable with html content

Question

I need to insert a React component into a String variable that contains html content. This variable will be render with dangerouslySetInnerHTML.

I replace my placeholder "!#ShareButton" with the content of my React component, but it renders [object Object] instead of the component itself

React component:

const ShareThis = ({ text }) => {
  return (
    <div class="one-line">{text}</div>
)}

export default ShareThis

var content (string variable with html content)

<p>Text 1</p>
!#ShareButton
<p>Text 2</p>

Page:

const htmlcontent = content.replace(/!#ShareThis/g,
  <ShareThis
    text="Hello"
  />)

return (
  <div dangerouslySetInnerHTML={{ __html: htmlcontent }} />
)

Result:

Text 1
[object Object]
Text 2

Do you know how to insert a React component into a String variable with html content?

Dennis Vash · Accepted Answer · 2020-05-29 12:43:41Z

2

You can't render React component as innerHTML because its an object, don't confuse between JSX and HTML.

To solve it your need content to be a valid HTML.

Can be done by making ShareThis a function returning a valid HTML as a string:

const ShareThis = ({ text }) => {
  return `<div class="one-line">${text}</div>`;
};

const content = `
<p>Text 1</p>
!#ShareButton
<p>Text 2</p>
`;

const htmlcontent = content.replace(
  /!#ShareButton/g,
  ShareThis({ text: "Hello" })
);

const App = () => {
  return <div dangerouslySetInnerHTML={{ __html: htmlcontent }} />;
};

Note that you have a typo in regex expression: /!#ShareButton/

edited May 29, 2020 at 12:43

answered May 29, 2020 at 12:38

Dennis Vash

54.2k12 gold badges120 silver badges133 bronze badges

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

Comments

Mudasir Zahoor · Accepted Answer · 2020-05-29 12:49:59Z

0

I don't know what use case are you trying to solve using this but you can edit your shareThis function like this to return html as a string to use it as innerHtml later:

const ShareThis = ({ text }) => {return (
   `<div class="one-line">${text}</div>`
)}
export default ShareThis

This should work..

answered May 29, 2020 at 12:49

Mudasir Zahoor

9246 silver badges19 bronze badges

Comments

Juan Marco · Accepted Answer · 2020-05-29 13:36:56Z

0

Another possible alternative would be to use the utility React HTML Parser which can convert HTML strings into react components (JSX).

Building on the example provided by Dennis:

import React from "react";
import ReactHtmlParser from "react-html-parser";

const ShareThis = ({ text }) => {
  return `<div class="one-line">${text}</div>`;
};

const content = `
<p>Text 1</p>
!#ShareButton
<p>Text 2</p>
`;

const htmlcontent = content.replace(
  /!#ShareButton/g,
  ShareThis({ text: "Hello" })
);

export default function App() {
  return <div>{ReactHtmlParser(htmlcontent)}</div>;
}

Working example

answered May 29, 2020 at 13:36

Juan Marco

3,2512 gold badges31 silver badges35 bronze badges

Collectives™ on Stack Overflow

Insert React component into a String variable with html content

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related