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?

SolidJS•2y ago•

4 replies

zimo

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>

  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?

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads