Use polymorphic component props in array

[HarlesPilter]

Hei. First of all thanks for the great example!

But I am struggling to figure out how to use the polymoprhic component props in another components array prop. I created an example https://codesandbox.io/s/polymorphic-issue-k2i18n?file=/src/App.tsx

We have a polymorphic <Text> component, that can be a <span>, <p> or <label>. When using the component normally as <Text as="label" htmlFor="test">Label</Text>everything works good. Component only allows props for tag that we define in "as".

However I want to use <List> as a wrapper to render out a list of <Text> components. This is a simple example, but in real world I would have a complex <Header> component that I can pass in list of polymorphic link props and those get rendered somewhere deep in <Header> component tree.

The problem I have with the approach I tried in codesandbox example is that I make the <List> generic as well and it seems to me that depending on what as i use in the items prop all other items inherit that one generic. I can't figure out how each of the items in <List> items prop would act in "isolation" and only allow props that come from the tag defined in its own "as".

Would be very grateful if we can shoot some ideas if this is even possible.

[ohansemmanuel]

I see. Could you shoot me a code example of the usage here? e.g., with your List component as described?