Typscript: allow combination of Element and Element[] for children

[Brmm]

Consider the following, a fixed GeoJSONLayer combined with a variable amount of GeoJSONLayer's.

<Map style='mapbox://styles/mapbox/light-v9'>
  <GeoJSONLayer data='{}' />
  {Array(3).fill({}).map((data, i) => (
    <GeoJSONLayer key={i} data={data} />
  ))}
</Map>

This gives a typescript error

Type '(Element | Element[])[]' is not assignable to type 'Element | Element[] | (Element | undefined)[] | (Element & string) | (Element & number) | (Element & false) | (Element & true) | ... 17 more ... | undefined'. Type '(Element | Element[])[]' is not assignable to type 'Element[]'.

Something is wrong with the children's definition on Prop.

Also, adding a comment above the Element[] part fixes it for some reason.

<Map style='mapbox://styles/mapbox/light-v9'>
  <GeoJSONLayer data='{}' />
  {/* magic comment */}
  {Array(3).fill({}).map((data, i) => (
    <GeoJSONLayer key={i} data={data} />
  ))}
</Map>

[mklopets]

Couldn't you spread ... the array to be a top-level child of Map?

[Brmm]

I tried that but unfortunately it's not working, try for yourself.

[sangdth]

I'm facing similar problem and using the "magic comment" while waiting for the fix.

[Brmm]

I made a PR almost a year ago but it's not being accepted. It's a very small fix.