CODEWITHSUNDEEP
reactjs
TOM
TOM

Reputation: 51

How to render components when componet tags are in a string?

I am getting on string from a rest API containing component tags. Following is example string:-

let stringFromAPI = "Lorem ipsum dolor sit amet, <TooltipComponent>consectetur</TooltipComponent> adipiscing elit. Non enim, <ButtonComponent>si omnia</ButtonComponent> non sequebatur, idcirco non erat ortus illinc. Re mihi non aeque satisfacit, et quidem locis pluribus. Ita relinquet duas, de quibus etiam atque etiam consideret. Ad <TooltipComponent>corpus</TooltipComponent> diceres pertinere-, sed ea, quae dixi, ad corpusne refers?"

When I am rendering it components are displayed as text instead of rendering. How can i make components in string rendered?

    render() {
        return ( <div>{stringFromAPI}</div>
    )
}

dangerouslySetInnerHTML={{__html: rawMarkup}} renders only html elements not react components.

Upvotes: 2

Views: 236

Answers (1)

Ming
Ming

Reputation: 4290

I assume you have access to backend source code. In this case, you will need to render React components to string first then concatenate and append them to the DOM in front-end.

Use ReactDOMServer.renderToString to translate React component into string.

This JSFiddle may give you an idea.

Upvotes: 1

Related Questions