2b:null 2c:["$","title",null,{"children":"React + Partial Lenses | Benjamin | Observable"}] 31:T442,App = () => { const lens = useLens({ foo: "bar", x: { y: { z: "hello" } }, }) const zoptic = ["x", "y", "z"] const zlens = lens.promap(zoptic, zoptic) const zzoptic = ["x", "y", L.removable("z"), "z", L.rewrite(s => s ? s.toUpperCase() : undefined), L.valueOr("not defined")] const zzlens = lens.promap(zzoptic, zzoptic) const fielsetStyle = { border: "1px solid #ddd", margin: "10px 0" } return htm`

foo: ${lens.get(["foo"])}

x.y.z: ${lens.get(["x", "y", "z"])}

x.y.z: ${zlens.get([])}

zlens.set([], event.target.value)} />

x.y.z: ${zzlens.get([])}

zzlens.set([], event.target.value)} />

` }32:[] 2f:{"id":"b3aeb87fb4336d4f","slug":"react-partial-lenses","title":"React + Partial Lenses","thumbnail":"dad50b778134894b6c521a943c8366d800503537f1e57477750a2a2705f088fa","access_level":"public","create_time":"$D2019-06-12T18:22:01.731Z","update_time":"$D2019-06-13T01:52:49.854Z","view_time":null,"first_public_time":"$D2019-06-13T01:53:14.530Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"8a1645a08dfd342c","login":"hastebrot","name":"Benjamin","avatar_url":"https://avatars-next.observableusercontent.com/0b9afaf0bc47ae18ca1173624214fe43ca87fad77cea4fb734a8b0e1b8cfe919","tier":"starter_2024"},"version":154,"publish_version":154,"role":null,"authored":false,"authors":[{"type":"individual","id":"ca28e2692a714a78","login":"hastebrot","name":"Benjamin","avatar_url":"https://avatars-next.observableusercontent.com/0b9afaf0bc47ae18ca1173624214fe43ca87fad77cea4fb734a8b0e1b8cfe919","tier":null}],"members":[{"type":"individual","id":"ca28e2692a714a78","login":"hastebrot","name":"Benjamin","avatar_url":"https://avatars-next.observableusercontent.com/0b9afaf0bc47ae18ca1173624214fe43ca87fad77cea4fb734a8b0e1b8cfe919","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"React + Partial Lenses","cells":[{"id":0,"value":"md`# React + Partial Lenses`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":42,"value":"md`\nBased on \"[...] [a screencast](https://www.youtube.com/watch?v=rNNEdVfqlBo) [...] showing how you can implement partial lenses with React via hooks to create stateful objects that can be passed around and modified.\"\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"render(htm`<${App} />`)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":30,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"useLens = initState => {\n const [state, setState] = React.useState(initState)\n const [lens, setLens] = React.useState(createLens([], [], state, setState))\n \n React.useEffect(() => {\n setLens(createLens([], [], state, setState))\n }, [state])\n \n return lens\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"createLens = {\n const createLens = (getter, setter, data, onChange) => {\n return {\n get: (subGetter) => L.get([getter, subGetter], data),\n set: (subSetter, value) => {\n const newData = L.set([setter, subSetter], value, data)\n onChange(newData)\n return newData\n },\n promap: (subGetter, subSetter) => {\n return createLens([getter, subGetter], [setter, subSetter], data, onChange)\n }\n }\n }\n return createLens\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":88,"value":"md`----`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":96,"value":"requireReact = require.alias({\n \"react\": \"react@16.8.6/umd/react.production.min.js\",\n \"react-dom\": \"react-dom@16.8.6/umd/react-dom.production.min.js\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":108,"value":"React = requireReact(\"react\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":104,"value":"ReactDOM = requireReact(\"react-dom\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"render = root => {\n const element = html``\n ReactDOM.render(root, element)\n return element\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"htm = import(\"https://unpkg.com/htm@2?module\").then(r => r.default.bind(React.createElement))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":2,"value":"R = import(\"https://unpkg.com/ramda@0.25.0/es/index.js?module\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":114,"value":"requireLenses = require.alias({\n \"partial.lenses\": \"https://unpkg.com/partial.lenses@14.17.0/dist/partial.lenses.js\",\n \"partial.lenses.validation\": \"https://unpkg.com/partial.lenses.validation@2.0.0/dist/partial.lenses.validation.js\",\n \"infestines\": \"https://unpkg.com/infestines@0.4.11/dist/infestines.js\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"L = requireLenses(\"partial.lenses\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"V = requireLenses(\"partial.lenses.validation\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"