Let React render the closing tag of the input?

Question

I have an unusual request. My website is built using React and I want people to be able to copy the HTML of the public website into their own React components.

The only problem I have is that the input does not have a closing tag when rendered by React.

Both of these are valid HTML

<input id="input-1" value="foo">
<input id="input-2" value="foo" />

However, only the second one will work if pasted directly into a React component. Is there a way to force React to render the input's closing tag on my site?

Answer 1

Consider running the copied html source string through a tool such as html tidy. If you want to format in the browser, consider Prettier. See example below. Good luck!

  const output = prettier.format("", {
    parser: "html",
    plugins: prettierPlugins,
  });

  // Send to server or update your clipboard.
  console.log(output)

sssccc
sssccc