How to convert a string into JSX in React 17

Question

Given some string:

const someString = "<p>Here is some string <strong>with some nested HTML</strong></p>"

I could remove the <p> and </p> from the string and then with React do:

React.createElement('p', {
  dangerouslySetInnerHTML: {
    __html: html,
  },
})

(We are assuming html here is the string someString with the removed p tags)

However, React 17 released with the new JSX Transform: https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html

Meaning React no longer compiles down to React.createElement an instead directly compiles down to JSX.

Is there a way to accomplish this with the new JSX Transform?

Answer 1

In fact yes you can using JSX syntax similar to React.createElement

React.createElement('p', {
  dangerouslySetInnerHTML: {
    __html: html,
  },
})

will become

_jsx('p', {
  dangerouslySetInnerHTML: {
    __html: html,
  },
})

You will however need to import: import { jsx as _jsx } from 'react/jsx-runtime';

Note: My issues was Typescript was complaingin Could not find a declaration file for module 'react/jsx-runtime'. I needed to add // @ts-ignore to ignore the JSX import