import {useShopStore} from "./shop_store"; import {useClickAway} from "./options/useClickAway"; import {Modal} from "react-bootstrap"; import React from "react"; import {Validation} from "./validate"; // #!render_count import {useRenderCount} from "@uidotdev/usehooks"; const JSONExample = JSON.stringify({ "items": [{"pn": "1124"}, {"pn": "2118"}, {"pn": "2118"}, {"pn": "2128"}], "type": "desktop" }); export function ImportJSON() { // #!render_count const renderCount = useRenderCount(); const shouldShow = useShopStore((state) => state.importShouldOpen); const data = useShopStore((state) => state.importValue); const loadDescription = useShopStore((state) => state.loadDescription); const updateImportDescription = useShopStore((state) => state.updateImportDescription); const closeImport = useShopStore((state) => state.closeImport); const showImport = useShopStore((state) => state.openImport); // #!render_count console.log("ImportJSON renders: ", renderCount) const ref = useClickAway((e) => { if (e.type === "mousedown") // ignore touchstart closeImport() } ); return (<>

Input the JSON description below. Should be something like:
{JSONExample}