AltContainer stores/actions not working with required propTypes

[nicoecheza]

Hi,

Parent actions

someFunc() {
    this.dispatch();
}

someFunc2() {
    this.dispatch();
}

someFunc3() {
    this.dispatch();
}

Parent component

<AltContainer store={ SomeStore } actions={ SomeActions }>
    <Child />
</AltContainer>

Child component

{...}
Child.propTypes = {
    someFunc: React.PropTypes.func.isRequired,
    someFunc2: React.PropTypes.func.isRequired,
    someFunc3: React.PropTypes.func.isRequired,
    someArray: React.PropTypes.array.isRequired
};

Error: Failed propType: Required prop someFunc was not specified in Child. Check the render method of Parent.

[powdahound]

Check out the component property of AltContainer. From the docs:

With this prop you can define which component you want to render within your AltContainer. If you have a single component and you’re using required propTypes then this is a legitimate way of rendering the components without getting a warning about invalid propTypes from React due to cloneWithProps.

[nicoecheza]

That's nice. But what about multiple components with propTypes inside an AltContainer?

[powdahound]

Not sure. I'm learning this stuff right now too. So far I haven't been able to get the component property to work well anyway. I've just removed the 'isRequired' from my component's propTypes which is not ideal.

[trobertsonsf]

Any chance there's a fix coming for this? Having to remove React prop types validation is a pretty poor side effect of using Alt. =/

[am80l]

+1

[gbiryukov]

+1 Actually, usage of defaultProps in your components can solve this issue

[seekshiva]

@nicoecheza If you have multiple child components, you can put them all into a single component, wrapped by a <div /> and then pass that single component as a lone child to AltContainer using the component prop.