Function OuterWrapper

src/script.ts:211–255

()

  });
};
export const OuterWrapper = () => {
  const [counter, setCounter] = React.useState(0);
  const [toggleInner, setToggleInner] = React.useState(true);
  const [items, setItems] = React.useState([1, 2, 3, 4]);

  return React.createElement(
    "div",
    {
      id: "outer-wrapper",
      style: "border: 2px solid black; padding: 10px; margin: 10px;",
    },
    React.createElement("div", {
      innerText: "Counter: " + counter,
    }),
    React.createElement("button", {
      onclick: () => setCounter(counter + 1),
      innerText: "Increase Counter",
    }),
    React.createElement("button", {
      onclick: () => setToggleInner(!toggleInner),
      innerText: toggleInner ? "Hide Inner" : "Show Inner",
    }),
    React.createElement("button", {
      onclick: () => {
        setItems([...items, Math.random()]);
      },
      innerText: "Add a random value",
    }),
    React.createElement("button", {
      onclick: () => {
        setItems(items.slice(0, -1));
      },
      innerText: "Remove last value",
    }),
    toggleInner && React.createElement(InnerWrapper, { counter }),
    React.createElement(DualIncrementer, null),
    ...items.map((i) =>
      React.createElement("div", null, React.createElement(RandomElement, null))
    ),
    // need to do some light debugging on this
    React.createElement(DualIncrementer, null),
    React.createElement(DualIncrementer, null)
    // React.createElement(DualIncrementer, null)
  );
};

export const InnerWrapper = ({ counter }: any) => {
  const [innerCounter, setInnerCounter] = React.useState(0);