CODEWITHSUNDEEP
javascriptreactjsreact-component
atwig
atwig

Reputation: 35

Treating child HTML as a string and as HTML in React

I'm trying to create a component that both shows the result of some HTML that includes other components and shows the code itself. Basically, a container that demos the markup and shows what markup was used with child components intact. The problem I'm having is that I can only seem to get the fully rendered HTML to display as code when I want he literal input that hasn't been resolved and still includes any component tags that have been used.

<ParentComponent>
    <div></div>
    <ChildComponent></ChildComponent>
    <div></div>
</ParentComponent>

I'd like the ParentComponent to both fully render all of its children, but also treat all HTML within it as a string, essentially, ideally without maintaining two copies of the children. The rendered version is no problem, that happens naturally, but the string form I can't seem to grab from anywhere, it gets the rendered version where ChildComponent is replaced by what it renders as.

Upvotes: 1

Views: 1866

Answers (1)

shivamsupr
shivamsupr

Reputation: 480

I guess this should work for your use case.

import React from "react";
import ReactDOM from "react-dom";
import jsxToString from 'jsx-to-string';

const ParentComponent = props => (
  <div>
    {`I'm a ParentComponent`} 
    {props.children}
  </div>
);
const ChildComponent = () => <div>{`I'm a ChildComponent`}</div>;

const getParent = () => <ParentComponent>
  <div />
  <ChildComponent />
  <div />
</ParentComponent>;

function App() {
  return (
    <div className="App">
      {getParent()}
      {jsxToString(getParent())}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Give it a try.

Upvotes: 2

Related Questions