CODEWITHSUNDEEP
javascriptreactjs
kevin41
kevin41

Reputation: 608

ReactJS - react-tree-graph not rendering tree

I'm trying to use react-tree-graph with ReactJS to create a hierarchical tree. I'm trying to reproduce the example from GitHub before replacing the data with my own but nothing renders when I start my react app. I'm not getting any errors in the developer tools so I'm having a hard time finding the issue. Do I need to add the script to an HTML file instead of a standalone react app?

ReactJS Code:

import Tree from 'react-tree-graph';
import './index.css';

const data = {
    name: 'Parent',
    children: [{
        name: 'Child One'
    }, {
        name: 'Child Two'
    }]
};

<div className="custom-container">
    <Tree
        data={data}
        height={200}
        width={400}
    />
</div>

CSS:

div.custom-container {
    background-color: #242424;
}

svg.custom .node circle {
    fill: #F3F3FF;
    stroke: #2593B8;
    stroke-width: 1.5px;
}

svg.custom .node text {
    font-size: 11px;
    background-color: #444;
    fill: #F4F4F4;
    text-shadow: 0 1px 4px black;
}

svg.custom .node {
    cursor: pointer;
}

svg.custom path.link {
    fill: none;
    stroke: #2593B8;
    stroke-width: 1.5px;
}

Upvotes: 0

Views: 540

Answers (1)

Satarupa
Satarupa

Reputation: 78

There is no return or render, Check the sandbox code:

import React from "react";
import Tree from "react-tree-graph";
import "./styles.css";

const data = {
  name: "Parent",
  children: [
    {
      name: "Child One"
    },
    {
      name: "Child Two"
    }
  ]
};
export default function App() {
  return (
    <div className="custom-container">
      <Tree data={data} height={200} width={400} />
    </div>
  );
}

Upvotes: 2

Related Questions