Skip to content

Instantly share code, notes, and snippets.

@obonyojimmy

obonyojimmy/recursive-render.html

Forked from nkvenom/recursive-render.html
Created March 15, 2018 04:08
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save obonyojimmy/c98306c3f64b34155b00bf7bf988d899 to your computer and use it in GitHub Desktop.
Save obonyojimmy/c98306c3f64b34155b00bf7bf988d899 to your computer and use it in GitHub Desktop.
Download ZIP
React Example Render Recursive Function
Raw
recursive-render.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Recursive Rendering in React</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<div id="react-app"></div>
<script type="text/babel">
var BookmarksTree = React.createClass({
renderBookmarks(root) {
if (root.children) {
return (
<div>
<strong>{root.name}</strong>
<ul>
{root.children.map(c => (<li key={c.id}>{this.renderBookmarks(c)} </li>))}
</ul>
</div>
);
}
else {
return <a href={root.url}> {root.name} </a>;
}
},
render() {
return (<div><h1>Some bookmarks!</h1>
{this.renderBookmarks(this.props.root)}
</div>);
}
});
var FAKE_BOOKMARKS = {
"id": "1",
"name": "Bookmarks bar",
"children": [
{
"id": "6",
"name": "TensorFlow",
"url": "http://www.tensorflow.org/"
},
{
"id": "96",
"name": "Introduction to Deep Learning with Python",
"url": "https://www.youtube.com/watch?v=S75EdAcXHKk"
},
{
"children": [
{
"id": "8",
"name": "What interests reddit?",
"url": "http://markallenthornton.com/blog/what-interests-reddit/?utm_content=buffer6ba72&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer"
},
{
"id": "215",
"name": "Foobaz",
"url": "http://www.code-labs.io/",
"children": [
{
"id": "9",
"name": "NG2",
"url": "https://angular.io"
},
{
"id": "11",
"name": "Redux",
"url": "https://github.com/rackt/react-redux",
"children": [{
"id": 56,
"name": "Hot Reloading with Time Travel",
"url": "https://www.youtube.com/watch?v=xsSnOQynTHs"
},
{
"id": 196,
"name": "Gource Visualization",
"url": "https://www.youtube.com/watch?v=bzLCvFG6WbY"
}]
}
]
}
],
"id": "7",
"name": "Dev",
}
]
};
ReactDOM.render(
<BookmarksTree root={FAKE_BOOKMARKS} />, document.getElementById('react-app')
);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment