I'm using handlebars templating on a project, but now I need to use React to handle some logic. I managed to integrate my React component in my non-react project but how do I return a handlebar template in a react component?
const Component = (props) => {
const { .... } = props;
// some logic ....
// return handlebars
return {{> components/users/user}};
};
I can't convert my handlebars components into React because there are a bunch of them and the logic is implemented in jQuery, so I just need to return the handlebars component in my React component.
A handlebars template is a string.
JSX is a syntax for generating JS that describes a DOM in terms that aren't based on a string.
If you want to generate a handlebars template, then you need to be working with strings.
const template = "{{> components/users/user}}"
And if you want to return something from the Component then it has to be JSX, so you need to take the string of HTML you generate an insert it into the result.
const compiledTemplate = Handlebars.compile(template);
const html = compiledTemplate({ foo: "Bar" });
const innerHTML = { __html: html };
return <div dangerouslySetInnerHTML={innerHTML} />;
This feels like a remarkably poor idea though. If you want to use React, use React. Convert your handlebars templates to components.