Appending component within component in React

Question

I am fetching a JSON file and want to make a visual tree representation of it.

The file itself is quite large, therefore what I want is using a loop to only display the very first keys that are found in an object (in that iteration). A key that has child nodes is displayed with an arrow next to it.

I have a TreeItem component:

<TreeView>
 <TreeItem nodeId="1" label="First Key" />
 <TreeItem nodeId="2" label="Second Key">
   <TreeItem nodeId="3" label="First Child" />
   <TreeItem nodeId="4" label="Second Child" />
   <TreeItem nodeId="5" label="Third Child" />
 </TreeItem>
<TreeView>

Is there a way I can embed the child TreeItem components if I know that the second key has children?

Travnikov.dev · Accepted Answer · 2019-11-05 16:47:04Z

1

It'll be reasonable to start using react-virtualized - the library was created for such cases

answered Nov 5, 2019 at 16:47

Travnikov.dev

4646 silver badges14 bronze badges

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

Comments

Nikhil Goyal · Accepted Answer · 2019-11-06 04:00:48Z

0

If you are not planning to use any library and want to do it in the plain react way, I would suggest rendering the inner blocks using the ternary operator.

This way you will be rendering only the parent elements first and as soon as you click on the element, based on some flag/condition, you can render the inner one.

answered Nov 6, 2019 at 4:00

Nikhil Goyal

1,9831 gold badge11 silver badges18 bronze badges

Collectives™ on Stack Overflow

Appending component within component in React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related