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 component from the MenuItem by passing props.children . The MainMenu component is then responsible for showing each child component with the relevant MenuItem becomes active (is clicked), like this: {menuItems()[activeMenuItem()].children}, where menuItems is a signal containing an array of menu items and 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 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, and unmounted when they are not shown - so basically, each time the activeMenuItem signal changes and thus {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

0 Replies

No replies yetBe the first to reply to this messageJoin

Gaming

Programming

Control when child component is mounted