CODEWITHSUNDEEP
javascripthtmlreactjsjsx
Phaki
Phaki

Reputation: 315

How to insert React component to HTML template?

I am using React-treeviz dependency for react to create Tree component in my application. I would like to use react component in my tree nodes for example material-ui icons.

My Tree component:

<TreevizReact
          data={data_1}
          relationnalField={"father"}
          nodeWidth={120}
          nodeHeight={80}
          areaHeight={500}
          areaWidth={1000}
          mainAxisNodeSpacing={2}
          secondaryAxisNodeSpacing={2}
          linkShape={"quadraticBeziers"}
          renderNode={(data) => {
            const nodeData = data.data;
            const settings = data.settings;
            let result = "";
            if (data.depth !== 2) {
              result = `<div class="box" style='cursor:pointer;height:${settings.nodeHeight}px; width:${settings.nodeWidth}px;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:${nodeData.color};border-radius:5px;'><div><strong>
          ${nodeData.text_1}
          </strong>
          
          </div><div>is</div><div><i>
          ${nodeData.text_2}
          </i></div></div>`;
            } else {
              result = `<div class="box" style='cursor:pointer;height:${
                settings.nodeHeight
              }px; width:${
                settings.nodeHeight
              }px;display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:${
                nodeData.color
              };border-radius:${settings.nodeHeight / 2}px;'><div><strong>
          ${nodeData.text_1}
          </strong></div></div>`;
            }
            return result;
          }}
          duration={600}
          isHorizontal
          linkWidth={(node) => 10}
        />

You can see it has a renderNode property that returns html template: (for simplicity I deleted styles)

renderNode={(data) => {
let result = "";
result = `<div>
<strong>
   ${nodeData.text_1}
</strong>
</div>`
return result;
}

I tried to insert a component in this template like:

renderNode={(data) => {
let result = "";
result = `<div>
<strong>
   ${nodeData.text_1}
</strong>
${<Icon/>}
</div>`
return result;
}

but then the result I got is [Object object]. enter image description here

Example code is available at this codesandbox link: https://codesandbox.io/s/lingering-browser-iiqud?file=/src/App.js

Upvotes: 0

Views: 1121

Answers (1)

Ryan Le
Ryan Le

Reputation: 8412

It's a bit complicated to show it on your app, but I made a simple example here for your reference

Basically, you will need to use renderToString from react-dom/server to render it into a string.

const yourString = renderToString(<YourComponent />);

By then, you can use yourString as a string to attach to your renderNode.

Edit red-cookies-mlfry

Upvotes: 1

Related Questions