Merge pull request #48 from 30-seconds/Chalarangelo-patch-1

Update TreeView to use hooks

snippets/TreeView.md

@@ -2,13 +2,12 @@
 
 Renders a tree view of a JSON object or array with collapsible content.
 
-Use `defaultProps` to set the default values of 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).
-Set the `state` of the component to the value of the `toggled` prop and bind the `toggle` method to the component's context.
+Use the `React.setState()` hook to create the `isToggled` state variable and give it the value of the `toggled` prop initially.
-Create a method, `toggle`, which uses `Component.prototype.setState` to change the component's `state` from collapsed to expanded and vice versa.
+Return a `<div>` to wrap the contents of the component and the `<span>` element, used to alter the component's `isToggled` state.
-In the `render()` method, use a `<div>` to wrap the contents of the component and the `<span>` element, used to alter the component's `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 `this.props.isParentToggled`, `this.state.toggled`, `this.props.name` and `Array.isArray()` on `this.props.data`. 
+For each child in `data`, determine if it is an object or array and recursively render a sub-tree.
-For each child in `this.props.data`, determine if it is an object or array and recursively render a sub-tree.
 Otherwise, render a `<p>` element with the appropriate style.
 
 ```css
@@ -48,76 +47,53 @@ div.tree-element:before {
 ```
 
 ```jsx
-class TreeView extends React.Component {
+function TreeView({
-  constructor(props) {
+  data,
-    super(props);
+  toggled = true,
-    this.state = {
+  name = null,
-      toggled: props.toggled
+  isLast = true,
-    };
+  isChildElement = false,
-    this.toggle = this.toggle.bind(this);
+  isParentToggled = true
-  }
+}) {
+  const [isToggled, setIsToggled] = React.useState(toggled);
 
-  toggle() {
-    this.setState(state => ({ toggled: !state.toggled }));
-  }
-
-  render() {
   return (
     <div
-        style={{ marginLeft: this.props.isChildElement ? 16 : 4 + "px" }}
+      style={{ marginLeft: isChildElement ? 16 : 4 + "px" }}
-        className={
+      className={isParentToggled ? "tree-element" : "tree-element collapsed"}
-          this.props.isParentToggled ? "tree-element" : "tree-element collapsed"
-        }
     >
       <span
-          className={this.state.toggled ? "toggler" : "toggler closed"}
+        className={isToggled ? "toggler" : "toggler closed"}
-          onClick={this.toggle}
+        onClick={() => setIsToggled(!isToggled)}
       />
-        {this.props.name ? (
+      {name ? <strong>&nbsp;&nbsp;{name}: </strong> : <span>&nbsp;&nbsp;</span>}
-          <strong>&nbsp;&nbsp;{this.props.name}: </strong>
+      {Array.isArray(data) ? "[" : "{"}
-        ) : (
+      {!isToggled && "..."}
-          <span>&nbsp;&nbsp;</span>
+      {Object.keys(data).map(
-        )}
-        {Array.isArray(this.props.data) ? "[" : "{"}
-        {!this.state.toggled && "..."}
-        {Object.keys(this.props.data).map(
         (v, i, a) =>
-            typeof this.props.data[v] == "object" ? (
+          typeof data[v] == "object" ? (
             <TreeView
-                data={this.props.data[v]}
+              data={data[v]}
               isLast={i === a.length - 1}
-                name={Array.isArray(this.props.data) ? null : v}
+              name={Array.isArray(data) ? null : v}
               isChildElement
-                isParentToggled={
+              isParentToggled={isParentToggled && isToggled}
-                  this.props.isParentToggled && this.state.toggled
-                }
             />
           ) : (
             <p
               style={{ marginLeft: 16 + "px" }}
-                className={
+              className={isToggled ? "tree-element" : "tree-element collapsed"}
-                  this.state.toggled ? "tree-element" : "tree-element collapsed"
-                }
             >
-                {Array.isArray(this.props.data) ? "" : <strong>{v}: </strong>}
+              {Array.isArray(data) ? "" : <strong>{v}: </strong>}
-                {this.props.data[v]}
+              {data[v]}
               {i === a.length - 1 ? "" : ","}
             </p>
           )
       )}
-        {Array.isArray(this.props.data) ? "]" : "}"}
+      {Array.isArray(data) ? "]" : "}"}
-        {!this.props.isLast ? "," : ""}
+      {!isLast ? "," : ""}
     </div>
   );
-  }
-}
-
-TreeView.defaultProps = {
-  isLast: true,
-  toggled: true,
-  name: null,
-  isChildElement: false,
-  isParentToggled: true
 }
 ```