How to create component tree hierarchy from JSON? ReactJS

Question

need to use the data value in tree format. It should automatically create a new node if there is another child

<Tree
     key={index}
     lineWidth={"2px"}
     lineColor={"green"}
     lineBorderRadius={"10px"}
     label={
            <StyledNode>
                {data.name}
            </StyledNode>
            }
    >
    {data.subordinates.map((data, index) => {
       return (
        <TreeNode
           key={index}
           label={
             <StyledNode>
                {data.name}
             </StyledNode>
                }
         ></TreeNode>
       );
   })}
 </Tree>

I want to create the new node on the basis of the JSON received and sample JSON data is like;

export const chartData1 = [
  {
    name: "root",
    sub: [
      { name: "child1", sub: [{ name: "schild1", sub: [] }] },
      { name: "child2", sub: [{ name: "schild2", sub: [] }] },
    ],
  },
  {
    name: "roo2",
    sub: [
      { name: "child1", sub: [] },
      { name: "child2 DOE", sub: [] },
    ],
  },
];

Rostyslav · Accepted Answer · 2020-07-02 07:47:44Z

4

This is the simplest solution. Just style your divs as you like.

function TreeNode({ node }) {
  if (node.sub.length === 0) {
    return <div>{node.name}</div>;
  } else {
    return (
      <div>
        <p>{node.name}</p>
        {node.sub.map(x => (
          <TreeNode node={x} />
        ))}
      </div>
    );
  }
}

Checkout how it works in the CodeSandbox

edited Jul 2, 2020 at 7:47

answered Jul 2, 2020 at 7:42

Rostyslav

2,88612 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Sanu Kumar Over a year ago

if we have more child then, it is not working @Rostyslav

Rostyslav Over a year ago

@SanuKumar have you checked the sandbox ?

Sanu Kumar Over a year ago

Yes, i have checked the sandbox, but my current JSON have more number of childs

Rostyslav Over a year ago

can you provide the JSON?

Rostyslav Over a year ago

It does work for the JSON format which you provided...

|

Sojin Antony · Accepted Answer · 2021-12-10 14:41:40Z

0

I also had a similar case.

And created a component for this feature. might be useful for the users who are searching for the same.

A fully customizable lightweight tree generator component.

You can pass custom child and parent components for a better view

https://www.npmjs.com/package/react-custom-tree

answered Dec 10, 2021 at 14:41

Sojin Antony

2,2521 gold badge14 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to create component tree hierarchy from JSON? ReactJS

2 Answers 2

7 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related