What do you call this React Component pattern?

Question

I am having a hard time finding some documentation on this pattern. Does it have a name?

TextBase is a styled component. so I can extend it as following: Text.H1 = withComponent('h1') however I want html attributes to be passed as well. Hence the function component. However when I extend my Text component the props are being overridden, resulting with all components being h1's.

const Text = (props) => {
   const { children, testid, ...rest } = props;
   return <TextBase data-testid={testid} {...rest}>{children}</TextBase>
}
Text.defaultProps = {color: 'red'}

Text.H1 = Text
Text.H1.defaultProps = { as: 'h1'}

Text.H2 = Text
Text.H2.defaultProps = { as: 'h2'}

Text.H3 = Text
Text.H3.defaultProps = { as: 'h3'}

🙏🏽

Answer 1

Try binding the function call using this or use arrow function or manually bind the function using bind. I am sure it will work. Reference fault is all this is