React - get HTML code from rendered component

In this article, we would like to show you how to get HTML code from a rendered component in React.

To do this, we will use the useRef hook to store a reference to the div element we'll render. The HTML code can be found in the current.outerHTML property.

Runnable example:

// ONLINE-RUNNER:browser;

// Note: Uncomment import lines during working with JSX Compiler.
// import React from 'react';
// import ReactDOM from 'react-dom';

const App = () => {
   const divRef = React.useRef();
  React.useEffect(() => {
    console.log(divRef.current.outerHTML);
   });
   return (
       <div ref={divRef}>
         Some text inside ...
       </div>
   );
}

const root = document.querySelector('#root');
ReactDOM.render(<App />, root);

Below is an example with a button - when you click on it, the HTML code will be displayed in the console:

// ONLINE-RUNNER:browser;

// Note: Uncomment import lines during working with JSX Compiler.
// import React from 'react';
// import ReactDOM from 'react-dom';

const App = () => {
   const divRef = React.useRef();
  const handleClick = () => {
    console.log(divRef.current.outerHTML);
   };
   return (
       <div ref={divRef}>
         <button onClick={handleClick}>Get HTML</button>
         <p>Some text inside ...</p>
       </div>
   );
}

const root = document.querySelector('#root');
ReactDOM.render(<App />, root);