Component with only <For /> in it removes all HTML children

I have this set up:

  return <div
    ref={mapElement}
  >
    <For each={mainStore.countries}>
      {country => {
        return <MapCountry country={country} />
      }}
    </For>
  </div>

  return <div
    ref={mapElement}
  >
    <For each={mainStore.countries}>
      {country => {
        return <MapCountry country={country} />
      }}
    </For>
  </div>

Where the outer div is used as a reference to attach a Mapbox-gl canvas element, along with some more HTML elements. But I also fill it with some components of my own "MapCountry". My problem is that when mainStore.countries is an empty list, Solid removes all children of my outer div, including the elements created by Mapbox-gl. My current work-around is to add a dummy element to the outer div:

  return <div
    ref={mapElement}
  >
    <For each={mainStore.countries}>
      {country => {
        return <MapCountry country={country} />
      }}
    </For>

    {/* dummy element lol */}
    <div />
  </div>

  return <div
    ref={mapElement}
  >
    <For each={mainStore.countries}>
      {country => {
        return <MapCountry country={country} />
      }}
    </For>

    {/* dummy element lol */}
    <div />
  </div>

Is this the best solution? Could I prevent solid from removing all items?

3 Replies

Madaxen86•5mo ago

Why not put the ref on the dummy div so that your component and the canvas are siblings?

Dakotys•5mo ago

Just wrap the For loop in <Portal>

zimoOP•5mo ago

Goated solution! Thank you for introducing me to Portals :) That was a good idea, but I realized I needed my <MapCountry> components in a specific element in Mapbox-gl for the paning and zooming to work correctly.

Gaming

Programming

Component with only <For /> in it removes all HTML children