Rendering phylotree object in nextjs app found: [object SVGSVGElement] error

[bonfaceonyango]

I am trying to render a phylotree object in a nextjs app but getting error "Error: Objects are not valid as a React child (found: [object SVGSVGElement]). If you meant to render a collection of children, use an array instead". Here is the code I am using. Kindly assist if you can spot the error in the code. `import { phylotree } from "phylotree"; import ReactDOMServer from "react-dom/server"; import { useState, useEffect } from "react"; import { Box } from "@mui/material";

export default function PhyloTree({ newick }) { const [renderedTree, setRenderedTree] = useState(null);

useEffect(() => { const tree = new phylotree(newick); const height = 500; const width = 500;

const colorNodesByName = (node) => {
  // Your node color styling logic here
};

const colorEdgesByTarget = (edge) => {
  // Your edge color styling logic here
};

const rt = tree.render({
  height: height,
  width: width,
  "left-right-spacing": "fit-to-size",
  "align-tips": true,
  "node-styler": colorNodesByName,
  "edge-styler": colorEdgesByTarget,
});

rt.nodeLabel((n) => {
  return n.data.name + " HELLO";
});

setRenderedTree(rt);

}, []);

return <Box sx={{ marginTop: 3 }}>{renderedTree && renderedTree.svg}; } `

I am then calling this component to render it on the page with a newick string as follows: import PhyloTree from "components/plants/Plant/phylotree"; export default function MyComponent() {

const newick = "(((A:0.1,B:0.2):0.3,C:0.4):0.5,D:1.0);";

return ; }

[stevenweaver]

Dear @bonfaceonyango,

I'm afraid that code that generates SVG and React doesn't play together all that nicely. A design pattern that I've taken to is to use React.createRef(), and then inject the SVG into the DOM element.

https://legacy.reactjs.org/docs/refs-and-the-dom.html

I haven't tried this with phylotree, but I do this for a different SVG here -- https://github.com/stevenweaver/hyphy-vision/blob/1479947d85f2e6cb1eaf28ced8e9981b57b15db4/src/jsx/nrm.jsx#L13

Best, Steven

[bonfaceonyango]

Dear Steven. Thank you for your response. I'll try it out.

Regards, Bonface

On Tue, 28 Mar 2023 at 17:22, Steven Weaver @.***> wrote:

Dear @bonfaceonyango https://github.com/bonfaceonyango,

I'm afraid that code that generates SVG and React doesn't play together all that nicely. A design pattern that I've taken to is to use React.createRef(), and then inject the SVG into the DOM element.

https://legacy.reactjs.org/docs/refs-and-the-dom.html

I haven't tried this with phylotree, but I do this for a different SVG here -- https://github.com/stevenweaver/hyphy-vision/blob/1479947d85f2e6cb1eaf28ced8e9981b57b15db4/src/jsx/nrm.jsx#L13

Best, Steven

— Reply to this email directly, view it on GitHub https://github.com/veg/phylotree.js/issues/432#issuecomment-1486991931, or unsubscribe https://github.com/notifications/unsubscribe-auth/AWAFVN67XDZVQAW4HMRHSUTW6LX3DANCNFSM6AAAAAAWKCKFZQ . You are receiving this because you were mentioned.Message ID: @.***>

[bonfaceonyango]

Dear @stevenweaver. I managed to render the tree in a next.js app by passing the SVG HTML file as src from public folder after going through and getting some concepts from this link you shared [ https://github.com/stevenweaver/hyphy-vision/blob/1479947d85f2e6cb1eaf28ced8e9981b57b15db4/src/jsx/nrm.jsx#L13]().Thank you very much.

[stevenweaver]

Dear @bonfaceonyango,

Great! Glad to hear that you were successful and that the source code shared helped.

Best, Steven