28:null 29:["$","title",null,{"children":"React Hooks: useState() | Josh | Observable"}] 2e:[] 2c:{"id":"175f425a1b537eab","slug":"react-hooks-usestate","title":"React Hooks: useState()","thumbnail":"1365643fb51ec8599e993120994d702aa65d1d61cd117d91f4b0962ea4ab912d","access_level":"public","create_time":"$D2021-06-23T01:58:51.367Z","update_time":"$D2021-06-24T11:50:07.006Z","view_time":null,"first_public_time":"$D2021-06-24T13:35:20.314Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"2c4ecf3d0f76ad2f","login":"jgrunik","name":"Josh","avatar_url":"https://avatars-next.observableusercontent.com/2ab3bbb1ab8469b93dd5c389080bd4862c4414e21b87e08a09c78222f8aaabc0","tier":"starter_2024"},"version":258,"publish_version":258,"role":null,"authored":false,"authors":[{"type":"individual","id":"eadfff79374106cc","login":"jgrunik","name":"Josh","avatar_url":"https://avatars-next.observableusercontent.com/2ab3bbb1ab8469b93dd5c389080bd4862c4414e21b87e08a09c78222f8aaabc0","tier":null}],"members":[{"type":"individual","id":"eadfff79374106cc","login":"jgrunik","name":"Josh","avatar_url":"https://avatars-next.observableusercontent.com/2ab3bbb1ab8469b93dd5c389080bd4862c4414e21b87e08a09c78222f8aaabc0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"195a49e1ace67aea","slug":"react-hooks","title":"React Hooks","owner":{"id":"2c4ecf3d0f76ad2f","login":"jgrunik","name":"Josh"}},"type":"notebook","body":{"title":"React Hooks: useState()","cells":[{"id":0,"value":"# React Hooks: `useState()`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":159,"value":"youtubePlayer(\"9xhKH43llhU\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"## Multiple `useState()`'s","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"React.render(htm`<${AppMultiple}/>`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"AppMultiple = () => {\n const [count, setCount] = useState(10);\n const [count2, setCount2] = useState(20);\n\n const increment = (c) => c + 1;\n\n const onClick = () => {\n setCount(increment);\n setCount2(increment);\n };\n\n return htm`\n

\n \n

count1: ${count}

count2: ${count2}

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":110,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":135,"value":"## Single `useState()`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"React.render(htm`<${AppSingle}/>`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"AppSingle = () => {\n const [{ count, count2 }, setCount] = useState({ count: 10, count2: 20 });\n\n const increment = (c) => c + 1;\n\n const onClick = () => {\n setCount(({ count, count2 }) => ({\n count: increment(count),\n count2: increment(count2)\n }));\n };\n\n return htm`\n

\n \n

count1: ${count}

count2: ${count2}

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":171,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"## Basic Form","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":175,"value":"React.render(htm`<${AppFormBasic}/>`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":177,"value":"AppFormBasic = () => {\n const [email, setEmail] = useState(\"\");\n const [password, setPassword] = useState(\"\");\n\n const onChangeEmail = ({ target: { value } }) => setEmail(value);\n const onChangePassword = ({ target: { value } }) => setPassword(value);\n\n return htm`\n

\n \n \n

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":208,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"## Custom Hook: `useForm()`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"React.render(htm`<${AppFormCustomHook}/>`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"AppFormCustomHook = () => {\n const [{ email, password }, handleChange] = useForm({\n email: \"\",\n password: \"\"\n });\n\n return htm`\n

\n \n \n

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"useForm = (initialValues) => {\n const [values, setValues] = useState(initialValues);\n\n const handleChange = ({ target: { name, value } }) =>\n setValues({ ...values, [name]: value });\n\n return [values, handleChange];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"## Custom Hook: `useLocalStorage()`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"React.render(htm`<${AppLocalStorage}/>`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"AppLocalStorage = () => {\n const [number, setNumber] = useLocalStorage(\"persistent number\", 0);\n\n return htm`\n

persistent number: ${number}

\n \n \n

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":246,"value":"useLocalStorage = (key, initialValue) => {\n const [storedValue, setStoredValue] = useState(() => {\n const item = localStorage.getItem(key);\n return item === undefined ? initialValue : JSON.parse(item);\n });\n\n const setValue = (value) => {\n value = value instanceof Function ? value(storedValue) : value;\n setStoredValue(value);\n localStorage.setItem(key, JSON.stringify(value));\n };\n\n return [storedValue, setValue];\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":241,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"useState = React.useState","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"import { React, htm } from \"@hastebrot/react@356\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"import { youtubePlayer } from \"@radames/youtube-player-api\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1","titling":"auto"}} 2d:"$2c:body"