{"action":"created","comment":{"url":"https://api.github.com/repos/visha12l/React-app/pulls/comments/136722488","pull_request_review_id":60301613,"id":136722488,"diff_hunk":"@@ -1,18 +1,44 @@\n import React from 'react';\n import './App.css';\n import './stylesheets/custom.css';\n-//import Index from './javascript/containers/todoIndex.js';\n-import Index from './javascript/containers/collapseAppIndex.js';\n+import CollapseAppIndex from './javascript/containers/collapseAppIndex.js';\n+import JsonIndex from './javascript/containers/jsonIndex.js';\n+import TodoIndex from './javascript/containers/todoIndex.js';\n \n class App extends React.Component {\n-  render() {\n-    return (\n-      <div className=\"App\">\n-          <div>\n-              <Index />\n-          </div>\n-      </div>\n-    );\n+\n+    constructor() {\n+        super();\n+        this.getChoice = this.getChoice.bind(this);\n+    }\n+\n+    getChoice (refName, event) {\n+        let list = document.getElementsByClassName('component');\n+        for(let i = 0; i < list.length ; i++) {\n+            list[i].classList.add('hide');\n+        }\n+        this.refs[refName].classList.remove('hide');\n+    }\n+\n+    render() {\n+        return (\n+            <div className=\"App\">\n+                <ul className=\"stickyLeftlist\">\n+                    <li><a onClick={this.getChoice.bind(this, 'one')}>1.Collapse App</a></li>\n+                    <li><a onClick={this.getChoice.bind(this, 'two')}>2.JSon App</a></li>\n+                    <li><a onClick={this.getChoice.bind(this, 'three')}>3.TodoApp</a></li>\n+                </ul>\n+                <div className=\"component\" ref='one'>\n+                    <CollapseAppIndex />\n+                </div>\n+                <div className=\"component hide\" ref='two'>\n+                    <JsonIndex />\n+                </div>\n+                <div className=\"component hide\" ref='three'>\n+                    <TodoIndex />\n+                </div>","path":"src/App.js","position":49,"original_position":49,"commit_id":"a6587d4381dbd38997e8e22a68ee15bf11a926d6","original_commit_id":"a6587d4381dbd38997e8e22a68ee15bf11a926d6","user":{"login":"avaneeshtripathi","id":20407975,"avatar_url":"https://avatars3.githubusercontent.com/u/20407975?v=4","gravatar_id":"","url":"https://api.github.com/users/avaneeshtripathi","html_url":"https://github.com/avaneeshtripathi","followers_url":"https://api.github.com/users/avaneeshtripathi/followers","following_url":"https://api.github.com/users/avaneeshtripathi/following{/other_user}","gists_url":"https://api.github.com/users/avaneeshtripathi/gists{/gist_id}","starred_url":"https://api.github.com/users/avaneeshtripathi/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/avaneeshtripathi/subscriptions","organizations_url":"https://api.github.com/users/avaneeshtripathi/orgs","repos_url":"https://api.github.com/users/avaneeshtripathi/repos","events_url":"https://api.github.com/users/avaneeshtripathi/events{/privacy}","received_events_url":"https://api.github.com/users/avaneeshtripathi/received_events","type":"User","site_admin":false},"body":"Its not good to play with hide class. The component remains in the DOM even if it is not needed. We can create a function which will return the desired component. Something like this.\r\n\r\ngetSubComponent (componentName) {\r\n  switch (componentName) {\r\n    case 'collapseIndex':\r\n      return (\r\n        <div className=\"component\" ref='one'>\r\n          <CollapseAppIndex />\r\n        </div>\r\n      );\r\n    case 'jsonIndex':\r\n      return (\r\n        <div className=\"component\" ref='two'>\r\n          <JsonIndex />\r\n        </div>\r\n    );\r\n    case 'todoIndex':\r\n      return (\r\n        <div className=\"component\" ref='three'>\r\n          <TodoIndex />\r\n        </div>\r\n      );\r\n    default:\r\n      return false;\r\n  }\r\n}\r\n\r\nUse a state initially: \r\n   stateName: ''\r\n\r\nAnd set state on click as:\r\n  this.setState({\r\n    stateName: 'jsonIndex'\r\n  })\r\n\r\nAnd call the function in render() as:\r\nthis.getSubComponent(this.state.stateName);","created_at":"2017-09-03T18:03:05Z","updated_at":"2017-09-03T18:03:05Z","html_url":"https://github.com/visha12l/React-app/pull/1#discussion_r136722488","pull_request_url":"https://api.github.com/repos/visha12l/React-app/pulls/1","author_association":"COLLABORATOR","_links":{"self":{"href":"https://api.github.com/repos/visha12l/React-app/pulls/comments/136722488"},"html":{"href":"https://github.com/visha12l/React-app/pull/1#discussion_r136722488"},"pull_request":{"href":"https://api.github.com/repos/visha12l/React-app/pulls/1"}}},"pull_request":{"url":"https://api.github.com/repos/visha12l/React-app/pulls/1","id":139009180,"html_url":"https://github.com/visha12l/React-app/pull/1","diff_url":"https://github.com/visha12l/React-app/pull/1.diff","patch_url":"https://github.com/visha12l/React-app/pull/1.patch","issue_url":"https://api.github.com/repos/visha12l/React-app/issues/1","number":1,"state":"open","locked":false,"title":"adds json data reading code and removes unnecessary code","user":{"login":"visha12l","id":14036921,"avatar_url":"https://avatars3.githubusercontent.com/u/14036921?v=4","gravatar_id":"","url":"https://api.github.com/users/visha12l","html_url":"https://github.com/visha12l","followers_url":"https://api.github.com/users/visha12l/followers","following_url":"https://api.github.com/users/visha12l/following{/other_user}","gists_url":"https://api.github.com/users/visha12l/gists{/gist_id}","starred_url":"https://api.github.com/users/visha12l/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/visha12l/subscriptions","organizations_url":"https://api.github.com/users/visha12l/orgs","repos_url":"https://api.github.com/users/visha12l/repos","events_url":"https://api.github.com/users/visha12l/events{/privacy}","received_events_url":"https://api.github.com/users/visha12l/received_events","type":"User","site_admin":false},"body":"","created_at":"2017-09-02T11:19:42Z","updated_at":"2017-09-03T18:03:05Z","closed_at":null,"merged_at":null,"merge_commit_sha":"81aa895e05adfd506b3016b35954bdffa6ed987d","assignee":null,"assignees":[],"requested_reviewers":[],"milestone":null,"commits_url":"https://api.github.com/repos/visha12l/React-app/pulls/1/commits","review_comments_url":"https://api.github.com/repos/visha12l/React-app/pulls/1/comments","review_comment_url":"https://api.github.com/repos/visha12l/React-app/pulls/comments{/number}","comments_url":"https://api.github.com/repos/visha12l/React-app/issues/1/comments","statuses_url":"https://api.github.com/repos/visha12l/React-app/statuses/a6587d4381dbd38997e8e22a68ee15bf11a926d6","head":{"label":"visha12l:json-app","ref":"json-app","sha":"a6587d4381dbd38997e8e22a68ee15bf11a926d6","user":{"login":"visha12l","id":14036921,"avatar_url":"https://avatars3.githubusercontent.com/u/14036921?v=4","gravatar_id":"","url":"https://api.github.com/users/visha12l","html_url":"https://github.com/visha12l","followers_url":"https://api.github.com/users/visha12l/followers","following_url":"https://api.github.com/users/visha12l/following{/other_user}","gists_url":"https://api.github.com/users/visha12l/gists{/gist_id}","starred_url":"https://api.github.com/users/visha12l/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/visha12l/subscriptions","organizations_url":"https://api.github.com/users/visha12l/orgs","repos_url":"https://api.github.com/users/visha12l/repos","events_url":"https://api.github.com/users/visha12l/events{/privacy}","received_events_url":"https://api.github.com/users/visha12l/received_events","type":"User","site_admin":false},"repo":{"id":102024297,"name":"React-app","full_name":"visha12l/React-app","owner":{"login":"visha12l","id":14036921,"avatar_url":"https://avatars3.githubusercontent.com/u/14036921?v=4","gravatar_id":"","url":"https://api.github.com/users/visha12l","html_url":"https://github.com/visha12l","followers_url":"https://api.github.com/users/visha12l/followers","following_url":"https://api.github.com/users/visha12l/following{/other_user}","gists_url":"https://api.github.com/users/visha12l/gists{/gist_id}","starred_url":"https://api.github.com/users/visha12l/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/visha12l/subscriptions","organizations_url":"https://api.github.com/users/visha12l/orgs","repos_url":"https://api.github.com/users/visha12l/repos","events_url":"https://api.github.com/users/visha12l/events{/privacy}","received_events_url":"https://api.github.com/users/visha12l/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/visha12l/React-app","description":null,"fork":false,"url":"https://api.github.com/repos/visha12l/React-app","forks_url":"https://api.github.com/repos/visha12l/React-app/forks","keys_url":"https://api.github.com/repos/visha12l/React-app/keys{/key_id}","collaborators_url":"https://api.github.com/repos/visha12l/React-app/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/visha12l/React-app/teams","hooks_url":"https://api.github.com/repos/visha12l/React-app/hooks","issue_events_url":"https://api.github.com/repos/visha12l/React-app/issues/events{/number}","events_url":"https://api.github.com/repos/visha12l/React-app/events","assignees_url":"https://api.github.com/repos/visha12l/React-app/assignees{/user}","branches_url":"https://api.github.com/repos/visha12l/React-app/branches{/branch}","tags_url":"https://api.github.com/repos/visha12l/React-app/tags","blobs_url":"https://api.github.com/repos/visha12l/React-app/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/visha12l/React-app/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/visha12l/React-app/git/refs{/sha}","trees_url":"https://api.github.com/repos/visha12l/React-app/git/trees{/sha}","statuses_url":"https://api.github.com/repos/visha12l/React-app/statuses/{sha}","languages_url":"https://api.github.com/repos/visha12l/React-app/languages","stargazers_url":"https://api.github.com/repos/visha12l/React-app/stargazers","contributors_url":"https://api.github.com/repos/visha12l/React-app/contributors","subscribers_url":"https://api.github.com/repos/visha12l/React-app/subscribers","subscription_url":"https://api.github.com/repos/visha12l/React-app/subscription","commits_url":"https://api.github.com/repos/visha12l/React-app/commits{/sha}","git_commits_url":"https://api.github.com/repos/visha12l/React-app/git/commits{/sha}","comments_url":"https://api.github.com/repos/visha12l/React-app/comments{/number}","issue_comment_url":"https://api.github.com/repos/visha12l/React-app/issues/comments{/number}","contents_url":"https://api.github.com/repos/visha12l/React-app/contents/{+path}","compare_url":"https://api.github.com/repos/visha12l/React-app/compare/{base}...{head}","merges_url":"https://api.github.com/repos/visha12l/React-app/merges","archive_url":"https://api.github.com/repos/visha12l/React-app/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/visha12l/React-app/downloads","issues_url":"https://api.github.com/repos/visha12l/React-app/issues{/number}","pulls_url":"https://api.github.com/repos/visha12l/React-app/pulls{/number}","milestones_url":"https://api.github.com/repos/visha12l/React-app/milestones{/number}","notifications_url":"https://api.github.com/repos/visha12l/React-app/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/visha12l/React-app/labels{/name}","releases_url":"https://api.github.com/repos/visha12l/React-app/releases{/id}","deployments_url":"https://api.github.com/repos/visha12l/React-app/deployments","created_at":"2017-08-31T17:00:55Z","updated_at":"2017-08-31T17:03:57Z","pushed_at":"2017-09-02T19:03:34Z","git_url":"git://github.com/visha12l/React-app.git","ssh_url":"git@github.com:visha12l/React-app.git","clone_url":"https://github.com/visha12l/React-app.git","svn_url":"https://github.com/visha12l/React-app","homepage":null,"size":78,"stargazers_count":0,"watchers_count":0,"language":"JavaScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":0,"mirror_url":null,"open_issues_count":1,"forks":0,"open_issues":1,"watchers":0,"default_branch":"develop"}},"base":{"label":"visha12l:develop","ref":"develop","sha":"9cf6237b95e0e8857b88d52b60c8d834b2d46bcc","user":{"login":"visha12l","id":14036921,"avatar_url":"https://avatars3.githubusercontent.com/u/14036921?v=4","gravatar_id":"","url":"https://api.github.com/users/visha12l","html_url":"https://github.com/visha12l","followers_url":"https://api.github.com/users/visha12l/followers","following_url":"https://api.github.com/users/visha12l/following{/other_user}","gists_url":"https://api.github.com/users/visha12l/gists{/gist_id}","starred_url":"https://api.github.com/users/visha12l/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/visha12l/subscriptions","organizations_url":"https://api.github.com/users/visha12l/orgs","repos_url":"https://api.github.com/users/visha12l/repos","events_url":"https://api.github.com/users/visha12l/events{/privacy}","received_events_url":"https://api.github.com/users/visha12l/received_events","type":"User","site_admin":false},"repo":{"id":102024297,"name":"React-app","full_name":"visha12l/React-app","owner":{"login":"visha12l","id":14036921,"avatar_url":"https://avatars3.githubusercontent.com/u/14036921?v=4","gravatar_id":"","url":"https://api.github.com/users/visha12l","html_url":"https://github.com/visha12l","followers_url":"https://api.github.com/users/visha12l/followers","following_url":"https://api.github.com/users/visha12l/following{/other_user}","gists_url":"https://api.github.com/users/visha12l/gists{/gist_id}","starred_url":"https://api.github.com/users/visha12l/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/visha12l/subscriptions","organizations_url":"https://api.github.com/users/visha12l/orgs","repos_url":"https://api.github.com/users/visha12l/repos","events_url":"https://api.github.com/users/visha12l/events{/privacy}","received_events_url":"https://api.github.com/users/visha12l/received_events","type":"User","site_admin":false},"private":false,"html_url":"https://github.com/visha12l/React-app","description":null,"fork":false,"url":"https://api.github.com/repos/visha12l/React-app","forks_url":"https://api.github.com/repos/visha12l/React-app/forks","keys_url":"https://api.github.com/repos/visha12l/React-app/keys{/key_id}","collaborators_url":"https://api.github.com/repos/visha12l/React-app/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/visha12l/React-app/teams","hooks_url":"https://api.github.com/repos/visha12l/React-app/hooks","issue_events_url":"https://api.github.com/repos/visha12l/React-app/issues/events{/number}","events_url":"https://api.github.com/repos/visha12l/React-app/events","assignees_url":"https://api.github.com/repos/visha12l/React-app/assignees{/user}","branches_url":"https://api.github.com/repos/visha12l/React-app/branches{/branch}","tags_url":"https://api.github.com/repos/visha12l/React-app/tags","blobs_url":"https://api.github.com/repos/visha12l/React-app/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/visha12l/React-app/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/visha12l/React-app/git/refs{/sha}","trees_url":"https://api.github.com/repos/visha12l/React-app/git/trees{/sha}","statuses_url":"https://api.github.com/repos/visha12l/React-app/statuses/{sha}","languages_url":"https://api.github.com/repos/visha12l/React-app/languages","stargazers_url":"https://api.github.com/repos/visha12l/React-app/stargazers","contributors_url":"https://api.github.com/repos/visha12l/React-app/contributors","subscribers_url":"https://api.github.com/repos/visha12l/React-app/subscribers","subscription_url":"https://api.github.com/repos/visha12l/React-app/subscription","commits_url":"https://api.github.com/repos/visha12l/React-app/commits{/sha}","git_commits_url":"https://api.github.com/repos/visha12l/React-app/git/commits{/sha}","comments_url":"https://api.github.com/repos/visha12l/React-app/comments{/number}","issue_comment_url":"https://api.github.com/repos/visha12l/React-app/issues/comments{/number}","contents_url":"https://api.github.com/repos/visha12l/React-app/contents/{+path}","compare_url":"https://api.github.com/repos/visha12l/React-app/compare/{base}...{head}","merges_url":"https://api.github.com/repos/visha12l/React-app/merges","archive_url":"https://api.github.com/repos/visha12l/React-app/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/visha12l/React-app/downloads","issues_url":"https://api.github.com/repos/visha12l/React-app/issues{/number}","pulls_url":"https://api.github.com/repos/visha12l/React-app/pulls{/number}","milestones_url":"https://api.github.com/repos/visha12l/React-app/milestones{/number}","notifications_url":"https://api.github.com/repos/visha12l/React-app/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/visha12l/React-app/labels{/name}","releases_url":"https://api.github.com/repos/visha12l/React-app/releases{/id}","deployments_url":"https://api.github.com/repos/visha12l/React-app/deployments","created_at":"2017-08-31T17:00:55Z","updated_at":"2017-08-31T17:03:57Z","pushed_at":"2017-09-02T19:03:34Z","git_url":"git://github.com/visha12l/React-app.git","ssh_url":"git@github.com:visha12l/React-app.git","clone_url":"https://github.com/visha12l/React-app.git","svn_url":"https://github.com/visha12l/React-app","homepage":null,"size":78,"stargazers_count":0,"watchers_count":0,"language":"JavaScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":true,"has_pages":false,"forks_count":0,"mirror_url":null,"open_issues_count":1,"forks":0,"open_issues":1,"watchers":0,"default_branch":"develop"}},"_links":{"self":{"href":"https://api.github.com/repos/visha12l/React-app/pulls/1"},"html":{"href":"https://github.com/visha12l/React-app/pull/1"},"issue":{"href":"https://api.github.com/repos/visha12l/React-app/issues/1"},"comments":{"href":"https://api.github.com/repos/visha12l/React-app/issues/1/comments"},"review_comments":{"href":"https://api.github.com/repos/visha12l/React-app/pulls/1/comments"},"review_comment":{"href":"https://api.github.com/repos/visha12l/React-app/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/visha12l/React-app/pulls/1/commits"},"statuses":{"href":"https://api.github.com/repos/visha12l/React-app/statuses/a6587d4381dbd38997e8e22a68ee15bf11a926d6"}},"author_association":"OWNER"}}
{"actor":{"display_login":"avaneeshtripathi"}}