Suppose i have a Parent and Child component in client side, server side returns a template string like below:
<Parent name="parent"><Child>i am child</Child></Parent>
now i need to show that inside the container in client side
<div id="container">{__templateplaceholder}</div>
Does anybody know how could i render the Parent and Child component in that placeholder area? thank you.
You can directly use your template string inside the tag but make sure to re render the page when the backend returns the data You can use React.useState() function to set the template string value returned from the backend
const [templateString , setTemplateString] = React.useState('');
wherever you recieve the data from backend in your react code add this this line will rerender the page after updating the value of template string so that it renders properly on the client side
setTemplateString(template_string_recieved_from_backend)
And React Function Should Look like
const App = () => {
return (
<div id = "container" dangerouslySetInnerHTML={{ __html: templateString
}}>
</div>
)
}
export default App;