andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update TreeView.md

Browse Source
This commit is contained in:
Angelos Chalaris
2019-02-12 20:12:39 +02:00
committed by GitHub
parent fd97a612cc
commit 8f848973f0
1 changed files with 1 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
snippets/TreeView.md
View File

@ -5,7 +5,7 @@ Renders a tree view of a JSON object or array with collapsible content.
Use object destructuring to set defaults for certain props. Use object destructuring to set defaults for certain props.
Use the value of the `toggled` prop to determine the initial state of the content (collapsed/expanded). Use the value of the `toggled` prop to determine the initial state of the content (collapsed/expanded).
Use the `setState()` hook to create the `isToggled` state variable and give it the value of the `toggled` prop initially. Use the `setState()` hook to create the `isToggled` state variable and give it the value of the `toggled` prop initially.
In the `render()` method, use a `<div>` to wrap the contents of the component and the `<span>` element, used to alter the component's `isToggled` state. Return a `<div>` to wrap the contents of the component and the `<span>` element, used to alter the component's `isToggled` state.
Determine the appearance of the component, based on `isParentToggled`, `isToggled`, `name` and `Array.isArray()` on `data`. Determine the appearance of the component, based on `isParentToggled`, `isToggled`, `name` and `Array.isArray()` on `data`.
For each child in `data`, determine if it is an object or array and recursively render a sub-tree. For each child in `data`, determine if it is an object or array and recursively render a sub-tree.
Otherwise, render a `<p>` element with the appropriate style. Otherwise, render a `<p>` element with the appropriate style.