CODEWITHSUNDEEP
webpackbabeljsreactjs
Misha Moroshko
Misha Moroshko

Reputation: 171459

How do I get JSX as a string?

I'd like to write a higher order component, let's say AddMarkup, that has a single child. It should render the child along with the code that generates it. For example:

<AddMarkup>
  <MyButton color="red">
    Red Button
  </MyButton>
</AddMarkup>

should result in something like this:

<div>
  <button style={{ color: 'red' }}>    /* Assume that MyButton is implemented this way */
    Red Button
  </button>
  <pre>
    <MyButton color="red">
      Red Button
    </MyButton>
  </pre>
</div>

I'm struggling with the <pre> bit. Is there a way to grab the original JSX as a string (so I could put it in the <pre> tag)? Is there any Babel or Webpack magic that I can apply?

Upvotes: 4

Views: 636

Answers (1)

Juho Veps&#228;l&#228;inen
Juho Veps&#228;l&#228;inen

Reputation: 26873

Likely the best way to solve this is to write a custom Babel plugin that relies on jsx-to-string to deal with the conversion. You'll need to write code that will inject the code as a string through some predefined prop (plugin setting) like childrenAsString.

Although this would work, it would also tie your code to Babel. Still, if you need it and you are happy with the gotcha, it could be worth a go.

Upvotes: 2

Related Questions