Interpolate a component into a string

Question

Is there any way in react to interpolate a component into an object string?

For example, I've tried something like this.

const stringWithHOC = `Some string wording ${<Foobar>Lorem Ipsum</Foobar>} some more string wording`

Assuming <Foobar> is a styled-components <a> for example

const Foobar = styled.a`
//some styling
`

I would expect to see the string rendered with "Lorem Ipsum" wrapped in an <a>

What is actually rendered in some component like this:

<SomeComponent>{stringWithHOC}</SomeComponent>

Is this:
"Some string wording {object Object} some more string wording"

Answer 1

You can use the renderToStaticMarkup from react-dom/server

import ReactDOMServer from 'react-dom/server';

const reactToString = (reactElement) => ReactDOMServer.renderToStaticMarkup(reactElement);
const Foobar = styled.a`
//some styling
`

const stringWithHOC = `Some string wording ${reactToString(<Foobar>Lorem Ipsum</Foobar>)} some more string wording`

// now you can use
<SomeComponent>{stringWithHOC}</SomeComponent>