0

Is there a way to render actual html + javascript from a string (that comes as a server response) inside of a React component?

React normally doesn't allow inserting things like that say via javascript's innerHTML. But is there a way to bypass that and actually have html + js working ?

import React from "react";

const CodeFromServer = () => {
  return "<div onClick={() => console.log(234234)}>Show in console</div>";
};

export default function App() {
  return <CodeFromServer />;
}

What gets rendered in the browser is:

<div onClick={() => console.log(234234)}>Show in console</div>

not the real button

I also tried these methods/packages but they only render html:

  • dangerouslySetInnerHTML
  • react-inner-html
  • html-react-parser
aldobsom
  • 1,737
  • 11
  • 13

0 Answers0