3e:null 3f:["$","title",null,{"children":"Randomize Names | Zach Krall | Observable"}] 45:T5f5,viewof list = render(({ useSetter }) => { const inputRef = useRef(null); const [names, setNames] = useState([]); const addName = (n) => { setNames((prev) => prev.concat([n])); }; const removeName = (n) => { setNames((prev) => prev.filter((x) => n !== x)); }; const formSubmit = (e) => { e.preventDefault(); const v = inputRef.current.value; addName(v); inputRef.current.value = ""; }; const shuffleAgain = () => { setNames((prev) => [...prev]); }; useSetter([...names].sort(() => (Math.random() > 0.5 ? 1 : -1))); return jsx`

${names.map((n) => { return jsx`

${n}

`; })}

`; })46:[] 43:{"id":"da2b5576cfee9be1","slug":null,"title":"Randomize Names","thumbnail":"85bb23a4e8e84cb23b86478b42fdccacd750bcb95695d3591af253bb50d37ffd","access_level":"public","create_time":"$D2023-08-03T18:44:29.533Z","update_time":"$D2023-10-03T13:03:07.389Z","view_time":null,"first_public_time":"$D2023-08-03T18:44:29.533Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"af6a3e06c4be9264","login":"zachkrall","name":"Zach Krall","avatar_url":"https://avatars-next.observableusercontent.com/1f0dc05bdc5ed69004bc409b4ecd164340016e6024a0d51b9b3383be6c663adf","tier":"starter_2024","bio":"","following":false},"version":123,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"b789abddbdfcfb60","login":"zachkrall","name":"Zach Krall","avatar_url":"https://avatars-next.observableusercontent.com/1f0dc05bdc5ed69004bc409b4ecd164340016e6024a0d51b9b3383be6c663adf","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"b789abddbdfcfb60","login":"zachkrall","name":"Zach Krall","avatar_url":"https://avatars-next.observableusercontent.com/1f0dc05bdc5ed69004bc409b4ecd164340016e6024a0d51b9b3383be6c663adf","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Randomize Names","cells":[{"id":0,"value":"# Randomize Names","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":53,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"viewof listAsGroups = render(() => {\n return jsx`

${n}

`;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"md`### Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"import { render, jsx, useState, useRef } from \"@j-f1/react\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"