chrisyalamov Posts - Answer Overflow

chrisyalamov

•Created by chrisyalamov on 7/18/2024 in #help

Nested islands in HonoX

I'm trying to nest islands in fashion similar to this:

// islands/toggleSection.tsx
export const ToggleSection = (children, isOpen, onToggle) => {
  // render accordion row if isOpen + button which fires onToggle
}  

// islands/toggleSectionGroup.tsx
export const ToggleSectionGroup = (children) => {
  const [focused, setFocused] = useState(-1);

  // cloneElement() all children to pass props isOpen and onToggle
}

// routes/index.tsx
...
return <ToggleSectionGroup>
  <ToggleSection />
  <ToggleSection />
  <ToggleSection />
</ToggleSectionGroup>
...

// islands/toggleSection.tsx
export const ToggleSection = (children, isOpen, onToggle) => {
  // render accordion row if isOpen + button which fires onToggle
}  

// islands/toggleSectionGroup.tsx
export const ToggleSectionGroup = (children) => {
  const [focused, setFocused] = useState(-1);

  // cloneElement() all children to pass props isOpen and onToggle
}

// routes/index.tsx
...
return <ToggleSectionGroup>
  <ToggleSection />
  <ToggleSection />
  <ToggleSection />
</ToggleSectionGroup>
...

However, it appears that the inner islands end up rendering on the server. How could I approach this?

2 replies

HHono

•Created by chrisyalamov on 6/30/2024 in #help

JSX Element type

I have a JSX component which should accept multiple children as props, however, using Element | Element[] (or ReactElement imported from hono/jsx) gives the following error when multiple children are passed:

Type 'Element' is not assignable to type 'ReactElement'.
  Type 'HtmlEscapedString' is not assignable to type 'ReactElement'.
    Type 'String & HtmlEscaped' is missing the following properties from type 'JSXNode': tag, props, children, type, and 2 more.ts(2322)

Type 'Element' is not assignable to type 'ReactElement'.
  Type 'HtmlEscapedString' is not assignable to type 'ReactElement'.
    Type 'String & HtmlEscaped' is missing the following properties from type 'JSXNode': tag, props, children, type, and 2 more.ts(2322)

Any ideas on how to accept multiple child elements?

4 replies

Gaming

Programming