Reputation: 2079
After running the test of my code, React says that there some props missing. So at the end I have this
static propTypes = {
'payoutInfo' : React.PropTypes.object,
'payoutInfo.sideBetPayouts' : React.PropTypes.arr,
'payoutInfo.sideBetPayouts.map' : React.PropTypes.func,
}
let me show you where the code comes from
here is the action. (I am using Flux)
class PayoutLimitActions {
constructor () {
this.generateActions('payoutsInfo');
}
payoutsInfo (payoutArray) {
this.actions.payoutsInfo(payoutArray);
this.dispatch();
}
}
export default PayoutLimitActions;
here is the store
import PayoutLimitActions from 'actions/PayoutLimitActions';
@createStore(flux)
class PayoutLimitStore {
constructor () {
this.state = {
payoutProp : localStorage.getItem('payoutArray') ? JSON.parse(localStorage.getItem('payoutArray')) : [],
};
}
@bind(PayoutLimitActions.payoutsInfo)
payoutsInfo (payoutArray) {
this.setState({
payoutProp : payoutArray,
});
localStorage.setItem('payoutArray', JSON.stringify(payoutArray));
}
}
export default PayoutLimitStore;
here I have an AuthStore
where I am using the PayoutLimitActions
axios.post(`${API_ENDPOINT}`, credentials)
.then( (response) => {
PayoutLimitActions.payoutsInfo(response.data.lobbyData);
this.actions.authSuccess({...response.data, ...credentials});
})
here the component
<TableLimitsTooltip {...{
payoutProp : this.props.payoutProp,
}} />
so, why that would be happening ?
Upvotes: 0
Views: 179
Reputation: 4931
It would be more useful to see the component code, not its use, to better understand what props you are actually using inside and how they are called.
Anyway, there is a mistake in the way you define types for an object. You must use the shape
type.
static propTypes = {
payoutInfo: React.PropTypes.shape({
sideBetPayouts: React.PropTypes.array
})
}
Also, be aware that
PropType
for an Array
is PropTypes.array
Array.prototype.map
methodUpvotes: 1