How to pass JSX in a data model field?

Technical Questions
, ,
1

Does Builderio have jsx support yet?

I’m trying to pass a jsx element to a Next.js app through one of builder’s data model fields. However, the only formats available for Code fields are HTML, CSS, JavaScript, and Other. If I try to use Other it just defaults to HTML. This is the jsx code I’m trying to pass:

<>After linking a source, you can analyze it with natural language prompting on the{’ ‘}Chat{’ '}</>

However, it’s just passing as a bunch of strings separated by spaces eg this:

‘<>After linking a source, you can analyze it with natural language prompting on the{’ ‘}\r\n" +
‘\r\n’ +
’ Chat\r\n’ + “{’ '}\r\n”

If not, what is the best way to pass a code fragment like this? I’d prefer not to install html-react-parser.

2

Edit: I’ve decided to pass it as an HTML code field as a workaround and set it in the div via <div dangerouslySetInnerHTML={{ __html: data}}/>

3

Hi patticatti​,

You cannot pass a JSX element through a builder’s data model fields.
The approach you mentioned is a great approach for now. <div dangerouslySetInnerHTML={{ __html: data }} /> is a simple and effective way to handle JSX-like content dynamically.

Thanks,