Render formatted (unminified) HTML in React (SSR with Next.js)

Question

How can I render formatted (unminified) HTML in React (SSR with Next.js)?

Expected output:

<div>
   <div>
       <input type="text" />
   </div>
</div>

Now receiving:

<div><div><input type="text"/></div></div>

TY!

Answer 1

You need to format the output before actually returning to browser. So as for nextjs, first switch to the custom server nexjs custom server and routing and walkthrough this answer for pretty printing html. Using nextjs or react SSR, this may not be possible as a built-in configurable option.

Answer 2

You might be looking for dangerouslysetinnerhtml. It allows you to pass in a string that you want rendered as raw HTML.

function createMarkup() {
  return {__html: '<div><div><input type="text"/></div></div>'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}