D3 Org Chart with custom React components returning object Object

Question

I'm creating an org chart using React and this library: https://github.com/bumbeishvili/org-chart. It uses D3 to create the org chart.

I want to use custom React components to style each node in the org chart, but when I try to set the node content to a React component, it returns {object Object} instead of actually rendering the component.

Please take a look at this Stackblitz for reproducing the error: https://stackblitz.com/edit/d3-org-chart-react-integration-hooks-oysugz?file=OrgChart.js

Here I try to set the node content to <TestOrgCard/> but as you can see, it does not render.

Does anyone have an idea how to render cards using custom React components?

Answer 1

You can't return a react component from the function you pass to .nodeContent(), it must be an HTML string. Since you want to render an existing react component you can use ReactDOMServer.renderToStaticMarkup to get the equivalent HTML string.

import ReactDOMServer from "react-dom/server";
...
const TestOrgCard = (props) => {
  return (
    <div>
      <h5> {props.name} </h5>
    </div>
  );
};
...
        .nodeContent((d, i, arr, state) => {
          return ReactDOMServer.renderToStaticMarkup(
            <TestOrgCard {...d.data} />
          );
        })