2c:null 2d:["$","title",null,{"children":"October 14th: React Day 2 | mmakutonin | Observable"}] 32:[] 30:{"id":"1881e5ebe8868422","slug":"october-14th-react-day-2","title":"October 14th: React Day 2","thumbnail":"45ac4d78751153dcc65a11cdc325edf23dd20caa0e6c7ce47bfcd92f6b62ced9","access_level":"public","create_time":"$D2019-10-07T01:47:33.426Z","update_time":"$D2019-10-13T23:24:03.470Z","view_time":null,"first_public_time":"$D2019-10-13T23:23:47.127Z","has_unpublished_edits":null,"fork":{"id":"c5e679d433e15b96","slug":"3-28-react-day-1","title":"March 28th: React Day 1","owner":{"id":"d0ed83f45d7d5784","login":"samchencode","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"bb1ac85e6e617203","login":"mmakutonin","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18644906b3e077e181742c57a3ff5752e32c431739eda8d84a9dfe241f87fd08","tier":"starter_2024"},"version":160,"publish_version":160,"role":null,"authored":false,"authors":[{"type":"individual","id":"9e68373e4597f5c1","login":"mmakutonin","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18644906b3e077e181742c57a3ff5752e32c431739eda8d84a9dfe241f87fd08","tier":null}],"members":[{"type":"individual","id":"9e68373e4597f5c1","login":"mmakutonin","name":"","avatar_url":"https://avatars-next.observableusercontent.com/18644906b3e077e181742c57a3ff5752e32c431739eda8d84a9dfe241f87fd08","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"9c88689622a6237d","slug":"it-280b-fa19","title":"IT-280B FA'19","owner":{"id":"bb1ac85e6e617203","login":"mmakutonin","name":""}},"type":"notebook","body":{"titling":"auto","title":"October 14th: React Day 2","cells":[{"id":0,"value":"md`# October 14th: React Day 2\n## Review:\nLet's take a look at the code below and try to figure out how it works.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"embed(\"https://codesandbox.io/embed/j24xwm831y?fontsize=14\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"md` ## \\`this.state \\`\n\n\\`this.state\\` is a plain old JavaScript object.\nThis contains any internal data that describes the behavior of the component at different points in runtime. \n\n\\`this.state\\` should have attributes that you expect to change, or *mutate*, during runtime, and that are specific to a component.\n\nEverytime \\`this.state\\` changes, you must change it with \\`this.setState( newState )\\` where \\`newState\\` is an Object containing what the new state of the attribute that was mutated should look like. \n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"embed(\"https://codesandbox.io/embed/8km5q5l1x0?fontsize=14\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"md`\nTo end class, let's debug some React code. Each code snippet, when run in a React App, will produce one or more errors. Why?\n\\`\\`\\`jsx\n/* 1 : There is one problem here. */\nconst App = () =>

\n\\`\\`\\`\n\n\\`\\`\\`jsx\n/* 2 : There are two problems here. */\nconst App = class MyBox extends React.Component {\n constructor() {\n this.state = { contents:[] }\n }\n\n render() {\n return (\n const { contents } = this.state\n

\n This box contains { contents.join(\", \") }\n

\n )\n }\n}\n\\`\\`\\`\n\n\\`\\`\\`jsx\n/* 3 : There is one problem here. */\nconst Emoji =

\nconst App = () => \n\\`\\`\\`\n\n\\`\\`\\`jsx\n/* 4 : There are three problems here */\nconst numbers = [ 1, 2, 3, 4, 5 ]\nconst NumDisplay = ({ num }) =>

num

\nconst App = () => numbers.map( x => NumDisplay )\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"md`## Exercises:\nPlease add a feature to the below React Sandbox that makes the program fetch a new Pokemon every 2 seconds and display it in the image tag.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"embed('https://codesandbox.io/embed/dazzling-cache-79uxp?fontsize=14')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":126,"value":"md`\n# Appendix\n\nNothing to see down here\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"embed = url => html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 31:"$30:body"