diff --git a/README.md b/README.md
index 9515a25d0..2b71ac8be 100644
--- a/README.md
+++ b/README.md
@@ -474,7 +474,7 @@ class TreeView extends React.Component {
super(props);
this.state = {
toggled: props.toggled
- }
+ };
this.toggle = this.toggle.bind(this);
}
@@ -484,26 +484,52 @@ class TreeView extends React.Component {
render() {
return (
-
-
- {this.props.name ?
{this.props.name}: :
}
- {Array.isArray(this.props.data) ? '[' : '{'}
- {!this.state.toggled && '...'}
+
+
+ {this.props.name ? (
+
{this.props.name}:
+ ) : (
+
+ )}
+ {Array.isArray(this.props.data) ? "[" : "{"}
+ {!this.state.toggled && "..."}
{Object.keys(this.props.data).map(
(v, i, a) =>
typeof this.props.data[v] == "object" ? (
-
+
) : (
-
- {Array.isArray(this.props.data) ? '' : {v}: }
- {this.props.data[v]}{i === a.length - 1 ? '' : ','}
-
- )
+
+ {Array.isArray(this.props.data) ? "" : {v}: }
+ {this.props.data[v]}
+ {i === a.length - 1 ? "" : ","}
+
+ )
)}
- {Array.isArray(this.props.data) ? ']' : '}'}
- {!this.props.isLast ? ',' : ''}
+ {Array.isArray(this.props.data) ? "]" : "}"}
+ {!this.props.isLast ? "," : ""}
- )
+ );
}
}
diff --git a/data/snippet_data.json b/data/snippet_data.json
index ff439afa7..1a2e70ca6 100644
--- a/data/snippet_data.json
+++ b/data/snippet_data.json
@@ -323,7 +323,7 @@
"text": "Renders a tree view of a JSON object or array with collapsible content.\n\nUse `defaultProps` to set the default values of certain props.\nUse the value of the `toggled` prop to determine the initial state of the content (collapsed/expanded).\nSet the `state` of the component to the value of the `toggled` prop and bind the `toggle` method to the component's context.\nCreate a method, `toggle`, which uses `Component.prototype.setState` to change the component's `state` from collapsed to expanded and vice versa.\nIn the `render()` method, use a `
` to wrap the contents of the component and the `
` element, used to alter the component's `state`.\nDetermine the appearance of the component, based on `this.props.isParentToggled`, `this.state.toggled`, `this.props.name` and `Array.isArray()` on `this.props.data`. \nFor each child in `this.props.data`, determine if it is an object or array and recursively render a sub-tree.\nOtherwise, render a `` element with the appropriate style.\n\n",
"codeBlocks": [
"```css\n.tree-element {\n margin: 0;\n position: relative;\n}\n\ndiv.tree-element:before {\n content: '';\n position: absolute;\n top: 24px;\n left: 1px;\n height: calc(100% - 48px);\n border-left: 1px solid gray;\n}\n\n.toggler {\n position: absolute;\n top: 10px;\n left: 0px;\n width: 0; \n height: 0; \n border-top: 4px solid transparent;\n border-bottom: 4px solid transparent;\n border-left: 5px solid gray;\n cursor: pointer;\n}\n\n.toggler.closed {\n transform: rotate(90deg);\n}\n\n.collapsed {\n display: none;\n}\n```",
- "```jsx\nclass TreeView extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n toggled: props.toggled\n }\n this.toggle = this.toggle.bind(this);\n }\n\n toggle() {\n this.setState(state => ({ toggled: !state.toggled }));\n }\n\n render() {\n return (\n
\n
\n {this.props.name ?
{this.props.name}: :
}\n {Array.isArray(this.props.data) ? '[' : '{'}\n {!this.state.toggled && '...'}\n {Object.keys(this.props.data).map(\n (v, i, a) =>\n typeof this.props.data[v] == \"object\" ? (\n
\n ) : (\n
\n {Array.isArray(this.props.data) ? '' : {v}: }\n {this.props.data[v]}{i === a.length - 1 ? '' : ','}\n
\n )\n )}\n {Array.isArray(this.props.data) ? ']' : '}'}\n {!this.props.isLast ? ',' : ''}\n
\n )\n }\n}\n\nTreeView.defaultProps = {\n isLast: true,\n toggled: true,\n name: null,\n isChildElement: false,\n isParentToggled: true\n}\n```",
+ "```jsx\nclass TreeView extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n toggled: props.toggled\n };\n this.toggle = this.toggle.bind(this);\n }\n\n toggle() {\n this.setState(state => ({ toggled: !state.toggled }));\n }\n\n render() {\n return (\n \n
\n {this.props.name ? (\n
{this.props.name}: \n ) : (\n
\n )}\n {Array.isArray(this.props.data) ? \"[\" : \"{\"}\n {!this.state.toggled && \"...\"}\n {Object.keys(this.props.data).map(\n (v, i, a) =>\n typeof this.props.data[v] == \"object\" ? (\n
\n ) : (\n
\n {Array.isArray(this.props.data) ? \"\" : {v}: }\n {this.props.data[v]}\n {i === a.length - 1 ? \"\" : \",\"}\n
\n )\n )}\n {Array.isArray(this.props.data) ? \"]\" : \"}\"}\n {!this.props.isLast ? \",\" : \"\"}\n
\n );\n }\n}\n\nTreeView.defaultProps = {\n isLast: true,\n toggled: true,\n name: null,\n isChildElement: false,\n isParentToggled: true\n}\n```",
"```jsx\nlet data = {\n lorem: {\n ipsum: \"dolor sit\",\n amet: {\n consectetur: \"adipiscing\",\n elit: [\n \"duis\",\n \"vitae\",\n {\n semper: \"orci\"\n },\n {\n est: \"sed ornare\"\n },\n \"etiam\",\n [\"laoreet\", \"tincidunt\"],\n [\"vestibulum\", \"ante\"]\n ]\n },\n ipsum: \"primis\"\n }\n};\nReactDOM.render(, document.getElementById(\"root\"));\n```"
],
"expertise": 2,
diff --git a/snippets/TreeView.md b/snippets/TreeView.md
index 9b47810ad..955817b98 100644
--- a/snippets/TreeView.md
+++ b/snippets/TreeView.md
@@ -53,7 +53,7 @@ class TreeView extends React.Component {
super(props);
this.state = {
toggled: props.toggled
- }
+ };
this.toggle = this.toggle.bind(this);
}
@@ -63,26 +63,52 @@ class TreeView extends React.Component {
render() {
return (
-
-
- {this.props.name ?
{this.props.name}: :
}
- {Array.isArray(this.props.data) ? '[' : '{'}
- {!this.state.toggled && '...'}
+
+
+ {this.props.name ? (
+
{this.props.name}:
+ ) : (
+
+ )}
+ {Array.isArray(this.props.data) ? "[" : "{"}
+ {!this.state.toggled && "..."}
{Object.keys(this.props.data).map(
(v, i, a) =>
typeof this.props.data[v] == "object" ? (
-
+
) : (
-
- {Array.isArray(this.props.data) ? '' : {v}: }
- {this.props.data[v]}{i === a.length - 1 ? '' : ','}
-
- )
+
+ {Array.isArray(this.props.data) ? "" : {v}: }
+ {this.props.data[v]}
+ {i === a.length - 1 ? "" : ","}
+
+ )
)}
- {Array.isArray(this.props.data) ? ']' : '}'}
- {!this.props.isLast ? ',' : ''}
+ {Array.isArray(this.props.data) ? "]" : "}"}
+ {!this.props.isLast ? "," : ""}
- )
+ );
}
}