Discussion on: React Higher-Order Components in TypeScript made simple

[archana]

Hey there Dan, MadProps for this article.

Going forward with this example, how would you use ReactDOM.render with this component?

Say we continue with this:

export const Demo = clickCounted()(DemoComponent);

Then our calling code would do

ReactDOM.render(<Demo {...stuff} />, document.getElementById('container'))

And we'd have to pass in something into stuff, which is of type <TOriginalProps & InjectedProps> Is that right?

So what's the point of having injected props calculated within the HOC definition? Am I missing something? If I want to render the Demo HOC, don't I have to give it all the props it needs? I think I'm missing the point...

[Dan Homola]

Hi, thanks for the MadProps :)

<Demo> has props of type TOriginalProps & ExternalProps (no InjectedProps).

<DemoComponent> has props of type TOriginalProps & InjectedProps.

Look at the diagram at the start of the article, it should make the prop types flow clearer :)