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:{"title":"React + Partial Lenses","cells":[{"id":0,"value":"md`# React + Partial Lenses`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":34,"value":"render(htm`<${App} />`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":88,"value":"md`----`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":108,"value":"React = requireReact(\"react\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":104,"value":"ReactDOM = requireReact(\"react-dom\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"render = root => {\n const element = html``\n ReactDOM.render(root, element)\n return element\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"htm = import(\"https://unpkg.com/htm@2?module\").then(r => r.default.bind(React.createElement))","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"R = import(\"https://unpkg.com/ramda@0.25.0/es/index.js?module\")","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":4,"value":"L = requireLenses(\"partial.lenses\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"V = requireLenses(\"partial.lenses.validation\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}