30:T806,viewof forms = render(() => { const [state, setState] = useObservableState({ message: "Hello, form!", hue: 180, size: 24 }); const { message, hue, size } = state; return jsx``; }) // viewof exampleObject = render(() => { // const [message, setMessage] = useObservableState("Hello, form!"); // const [hue, setHue] = useObservableState(180); // const [size, setSize] = useObservableState(24); // return jsx``; // })31:[] 2e:{"title":"React Examples","cells":[{"id":990,"value":"# React Examples","pinned":false,"hidden":false,"mode":"md"},{"id":1309,"value":"Simple stateless component","pinned":false,"hidden":false,"mode":"md"},{"id":1230,"value":"render(() => jsx`

Hello, world!

`)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1311,"value":"A stateful component using `useObservableState`. `viewof countView` returns the rendered React component and `countView` return the state of the component.","pinned":false,"hidden":false,"mode":"md"},{"id":1263,"value":"viewof counter = render(Counter, { initialCount: 10 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1262,"value":"counter","pinned":true,"hidden":false,"mode":"ojs"},{"id":1264,"value":"function Counter({ initialCount = 0 }) {\n const [count, setCount] = useObservableState(initialCount);\n return jsx`

\n \n ${count}\n \n

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1315,"value":"A stateful component that also accepts props from another cell. When the props change and/or when the component's state changes, the component re-renders.","pinned":false,"hidden":false,"mode":"md"},{"id":243,"value":"viewof timer = render(TimerInput, { count: seconds })","pinned":true,"hidden":false,"mode":"ojs"},{"id":1260,"value":"timer","pinned":true,"hidden":false,"mode":"ojs"},{"id":246,"value":"seconds = {\n let i = 0;\n yield 0;\n while (true) {\n yield Promises.delay(1000, ++i);\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1259,"value":"function TimerInput({ count }) {\n const [unit, setUnit] = useObservableState(\"second\");\n return jsx`\n <${Timer} count=${count} unit=${unit} />\n setUnit(event.target.value), [setUnit])}\n >\n \n \n \n \n `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":245,"value":"function Timer({ count, unit }) {\n const number = (\n unit === \"second\" ? count : unit === \"minute\" ? count / 60 : count / 3600\n ).toFixed(2);\n return jsx`\n

\n ${number} ${unit}${\n number === 1 ? \" has\" : \"s have\"\n } elapsed\n

\n`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1350,"value":"One more stateful component that combines several form elements and stores the value of each in a single state object. If the `useObservableState` hook is used more than once in a single component/cell, the cell view's value will be overwritten by the most recently updated state value. I'm open to contributions to support this 👍","pinned":false,"hidden":false,"mode":"md"},{"id":852,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":874,"value":"forms","pinned":true,"hidden":false,"mode":"ojs"},{"id":909,"value":"Radio = ({ label, value, setValue, selected }) => jsx` \n \n setValue(value)}\n />\n ${\" \"}${label}\n \n `","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"import { render, useObservableState, jsx, useCallback } from \"@gnestor/react\"","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}