Support for overriding prop values

[elliotgeno]

Not sure if this functionality is already available, but currently, if you provide another component to an attribute, the JSX that is rendered shows the value of the object instead of the displayName. For example:
<Accordion.Toggle as={Card.Header} >
is rendered like:
<Accordion.Toggle as={{ $$typeof: Symbol(react.forward_ref), defaultProps: undefined, displayName: 'Card.Header', render: function noRefCheck() {} }} >

I would like to only show the displayName in this scenario.
Is there a way to override the string the attribute returns?

If not, maybe we can make a slight adjustment to options.filterProps to work similarly to options.displayName?
If you provide a function, and that function returns a string that isn't a boolean, use that new string for the attribute value instead.

Sound good?

[elliotgeno]

In this case my filterProps object would look like this:
filterProps: (value, key) => { if (key === "style") { return false } if (key === "as") { return value.displayName; } }

[dvnrsn]

This would be nice for really lengthy prop values as well. Say one has a long array of objects. It'd be nice to be able to render something like array or [{}, {}]

[quantizor]

@Andarist would it be possible to add this functionality? maybe mapProps instead of filterProps so we're not overloading

[Andarist]

@probablyup note that I'm not a maintainer of this package - just fixed some issues here a few weeks back

[as-zlynn-philipps]

Thanks for your work, @probablyup. I hope it gets merged. Although, it doesn't really address the need to format prop values on the fly as an escape hatch. I believe that would still be useful.