{"action":"opened","issue":{"url":"https://api.github.com/repos/dalton-obray/jammming/issues/9","repository_url":"https://api.github.com/repos/dalton-obray/jammming","labels_url":"https://api.github.com/repos/dalton-obray/jammming/issues/9/labels{/name}","comments_url":"https://api.github.com/repos/dalton-obray/jammming/issues/9/comments","events_url":"https://api.github.com/repos/dalton-obray/jammming/issues/9/events","html_url":"https://github.com/dalton-obray/jammming/issues/9","id":365193030,"node_id":"MDU6SXNzdWUzNjUxOTMwMzA=","number":9,"title":"Avoid mutating state","user":{"login":"stevetoro","id":7355203,"node_id":"MDQ6VXNlcjczNTUyMDM=","avatar_url":"https://avatars1.githubusercontent.com/u/7355203?v=4","gravatar_id":"","url":"https://api.github.com/users/stevetoro","html_url":"https://github.com/stevetoro","followers_url":"https://api.github.com/users/stevetoro/followers","following_url":"https://api.github.com/users/stevetoro/following{/other_user}","gists_url":"https://api.github.com/users/stevetoro/gists{/gist_id}","starred_url":"https://api.github.com/users/stevetoro/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/stevetoro/subscriptions","organizations_url":"https://api.github.com/users/stevetoro/orgs","repos_url":"https://api.github.com/users/stevetoro/repos","events_url":"https://api.github.com/users/stevetoro/events{/privacy}","received_events_url":"https://api.github.com/users/stevetoro/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-09-30T05:11:08Z","updated_at":"2018-09-30T05:11:08Z","closed_at":null,"author_association":"NONE","body":"https://github.com/dalton-obray/jammming/blob/master/src/Components/App/App.js#L35-L37\r\n\r\nWhen you write some code like\r\n\r\n```javascript\r\nlet someArray = this.state.someProperty;\r\nsomeArray.push();\r\n```\r\n\r\nYou are directly mutating React's state, which is considered a bad practice. React's state should only be changed by `this.setState()` because this method in turn signals to React that a component needs to be re-rendered. Directly mutating the state does _not_, which can cause complications.\r\n\r\nConsider using a non-mutating `Array` method instead, like `slice`, `concat`, `map`, or `filter` which all return a brand new array instead. \r\n\r\nYou are then free to mutate _that_ copied array and then pass the final version of that copied array to `this.setState()`.\r\n\r\nHere's an example:\r\n\r\n```javascript\r\nlet updatedPlaylistTracks = this.state.playlistTracks.concat(track);\r\nthis.setState({\r\n  playlistTracks: updatedPlaylistTracks\r\n});\r\n```\r\n\r\nRead more about [immutability in React here](https://medium.com/pro-react/a-brief-talk-about-immutability-and-react-s-helpers-70919ab8ae7c)."}}
{"actor":{"display_login":"stevetoro"}}