Control when child component is mounted

I am creating a mega menu component which is used in the following way:

<MainMenu>
  <MenuItem title="Products">
    <ChildComponent />
  </MenuItem>
  <MenuItem title="Staff">
    <AnotherChildComponent />
  </MenuItem>
</MainMenu>

<MainMenu>
  <MenuItem title="Products">
    <ChildComponent />
  </MenuItem>
  <MenuItem title="Staff">
    <AnotherChildComponent />
  </MenuItem>
</MainMenu>

Each child component is passed to the

MainMenu

MainMenu

component from the

MenuItem

MenuItem

by passing

props.children

props.children

. The

MainMenu

MainMenu

component is then responsible for showing each child component with the relevant

MenuItem

MenuItem

becomes active (is clicked), like this:

{menuItems()[activeMenuItem()].children}

{menuItems()[activeMenuItem()].children}

, where

menuItems

menuItems

is a signal containing an array of menu items and

activeMenuItem

activeMenuItem

is a signal containing the index of the currently active menu item. It works pretty well.

The problem I'm trying to solve is that it seems the child components are mounted before the

MainMenu

MainMenu

actually shows it, and they are mounted only once. Ideally, I would like child components to the mounted each time it is shown by the

MainMenu

MainMenu

, and unmounted when they are not shown - so basically, each time the

activeMenuItem

activeMenuItem

signal changes and thus

{menuItems()[activeMenuItem()].children}

{menuItems()[activeMenuItem()].children}

is called again.

Here is the full code in the playground: https://playground.solidjs.com/anonymous/0094b6fc-014a-40a7-be43-e1c008fe3df4

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

Control when child component is mounted

I am creating a mega menu component which is used in the following way:

<MainMenu>
  <MenuItem title="Products">
    <ChildComponent />
  </MenuItem>
  <MenuItem title="Staff">
    <AnotherChildComponent />
  </MenuItem>
</MainMenu>

<MainMenu>
  <MenuItem title="Products">
    <ChildComponent />
  </MenuItem>
  <MenuItem title="Staff">
    <AnotherChildComponent />
  </MenuItem>
</MainMenu>

Each child component is passed to the

MainMenu

MainMenu

component from the

MenuItem

MenuItem

by passing

props.children

props.children

. The

MainMenu

MainMenu

component is then responsible for showing each child component with the relevant

MenuItem

MenuItem

becomes active (is clicked), like this:

{menuItems()[activeMenuItem()].children}

{menuItems()[activeMenuItem()].children}

, where

menuItems

menuItems

is a signal containing an array of menu items and

activeMenuItem

activeMenuItem

is a signal containing the index of the currently active menu item. It works pretty well.

The problem I'm trying to solve is that it seems the child components are mounted before the

MainMenu

MainMenu

actually shows it, and they are mounted only once. Ideally, I would like child components to the mounted each time it is shown by the

MainMenu

MainMenu

, and unmounted when they are not shown - so basically, each time the

activeMenuItem

activeMenuItem

signal changes and thus

{menuItems()[activeMenuItem()].children}

{menuItems()[activeMenuItem()].children}

is called again.

Here is the full code in the playground: https://playground.solidjs.com/anonymous/0094b6fc-014a-40a7-be43-e1c008fe3df4

Solid Playground

Quickly discover what the solid compiler will generate from your JSX template

Control when child component is mounted

Similar Threads

Control when child component is mounted

Similar Threads

Similar Threads

Similar Threads