Rendering REACT component as string of HTML to copy or add to textarea

user_11455212 0
Viewed 266

I'm trying to get the HTML from a component as a markup string, so I can append it to a textarea. The hack below with the first button works, but I think it's not the right way to approach this problem and I don't like having a random hidden div in my page.

.renderToStaticMarkup seem to be the perfect tool, but it trows an error directly:

Uncaught TypeError: can't access property "blockList", Object(...)(...) is null

blocklist is coming from a store, could it be that .renderToStaticMarkup can't be called on components using the useContext hook?

import React, { useState, useEffect } from "react";
import ReactDOMServer from "react-dom";
import { Icon, BlockCompilerToHTML } from "components/lib";
import Style from "./themeConfigCard.module.scss";
import { MyButton } from "components/myButton/myButton";

export function ThemeConfigCard(props) {
  let htmlString = "";

  useEffect(() => {
    //htmlString = ReactDOMServer.renderToStaticMarkup(<BlockCompilerToHTML />);
    //Above commented because it trows error.
  }, []);

  return (
    <div className={Style.themeConfigCard}>
      <MyButton
        onClick={() => {
          console.log(document.getElementById("rendered_html").innerHTML);
          document.getElementById("mytextarea").value =
            document.getElementById("rendered_html").innerHTML;
        }}
      >
        Get HTML as string with hack
      </MyButton>
      <MyButton
        onClick={() => {
          document.getElementById("mytextarea").value = htmlString;
        }}
      >
        Get HTML as string using renderToStaticMarkup
      </MyButton>

      <textarea id="mytextarea"></textarea>

      <div style={{ display: "none" }} id="rendered_html">
        <BlockCompilerToHTML />
      </div>
    </div>
  );
}
react-hooks reactjs html javascript
1 Answers

Hi try the below solution and its working

import React from 'react';
import { renderToStaticMarkup } from 'react-dom/server'

class App extends React.Component {
  state = {};
  render(){
    const {textarea} = this.state;
    return (
      <div>
        <textarea id="mytextarea"></textarea>
        <Test />
        <button onClick={this.handleClick} >Set textarea</button>
      </div>
    )
  }
  handleClick = ()=>{
    const value = renderToStaticMarkup(<Test />);
    document.getElementById("mytextarea").value = value;
  }
}
const Test = ()=>{
  return (
    <div>Hello</div>
  )
}


export default App;
user_158831620
Related