Turning a TSX/JSX React into a string or DOM element

Question

So I have an unusual requirement from my tech lead. I essentially need to turn a callback that returns JSX and turn the output into an HTMLElement or a string.

The thing is that we're building a reusable, low level infinite scroll component that reuses the DOM so that only 20 DOM elements are ever present on the componenent. Here is the codepen for the PoC I was sent for this:

https://codepen.io/hemant30/pen/rNWQEZy?editors=0010

The codepen works, but doesn't handle anything in React, it's purely DOM manipulation.

The callback the component receives is something like this:

(data: any) => {
      return (
        <div key={data.id}>
          {data.id} - {data.name}
          <br />
          <a href="#">Text</a>
        </div>
      );
    }

The idea is to be able to then, when using this callback internally, turn it into something that can be added to an element through dangerouslySetInnerHTML.

I have tried multiple things and approaches, but my approaches haven't been approved. So I turn to you to see if there is a way to do this or not.

This is a real "dear god why" ask. Can you not just convert the whole code to React? — Linda Paiste
– Linda Paiste, Commented Mar 16, 2021 at 19:13
I'd like to, but apparently this component needs to be very performant and previous attempts at the company weren't as successful in making it both usable and performant. — Carlos Jimenez Bermudez
– Carlos Jimenez Bermudez, Commented Mar 16, 2021 at 19:31

Kishieel · Accepted Answer · 2021-03-16 19:16:19Z

1

You can check renderToStaticMarkup method, it can transform jsx into string html.

import ReactDOMServer from 'react-dom/server'

const htmlString = ReactDOMServer.renderToStaticMarkup(
    <div>
         <Component/>
         /* etc. */
    </div>
);

answered Mar 16, 2021 at 19:16

Kishieel

2,0852 gold badges13 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Turning a TSX/JSX React into a string or DOM element

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related