0

I try to connect the state to the props in one of my components. When mapPropsToState(state) is called I can see that the state is exactly what I want it to be. However, when I try to log the props I get an error stating:

Uncaught ReferenceError: props is not defined
    at eval (eval at _getCardAndBalance (VM28 Home.bundle:NaN), <anonymous>:1:1)
    at _getCardAndBalance (VM28 Home.bundle:58)
    at Object.onPress (VM28 Home.bundle:235)
    at TouchableText.touchableHandlePress (Text.js:242)
    at TouchableText._performSideEffectsForTransition (Touchable.js:880)
    at TouchableText._receiveSignal (Touchable.js:779)
    at TouchableText.touchableHandleResponderRelease (Touchable.js:491)
    at onResponderRelease (Text.js:194)
    at Object.invokeGuardedCallbackImpl (ReactNativeRenderer-dev.js:286)
    at invokeGuardedCallback (ReactNativeRenderer-dev.js:497)

I don't understand what am I doing wrong here and why it doesn't work.

This is my reducer:

const initialState = {}

const calReducer = (state = initialState, action:any) => {

    console.log('CAL reducer with type ' + action.type + ' token ' + action.token)

    switch(action.type) {

        case CAL_SEND_OTP_TOKEN:
            return {...state, sendOtpToken: action.token}
        case CAL_VERIFY_OTP_TOKEN:
            return {...state, verifyOtpToken: action.token}
        case CAL_GET_PAY_ACCOUNT:
            return {...state, payAccount: action.cards}
        default:
            return state
    }
}

export default calReducer;

This is my component:

const Home = (props: any) => {

  useEffect(() => { 
    console.log("Home --> useEffect() props are: " + props)
  }, [])

return (
        <View style={styles.MainContainer}>
              <ScrollView
          scrollEventThrottle={17}
          contentContainerStyle={{ paddingTop: Header_Maximum_Height }}
          onScroll={Animated.event([
            { nativeEvent: { contentOffset: { y: AnimatedHeaderValue } } }
          ], { useNativeDriver: false })}>
          
            <Text style={styles.TextViewStyle} onPress={ (e) => _getCardAndBalance(e)}>GetCardsAndBalance</Text>
        </ScrollView>
);
};

const mapDispatchToProps = (dispatch:any) => ({
  setCalSendOtpToken: (token: string)  => dispatch(setCalSendOtpToken(token)),
})

const mapStateToProps = (state:any) => { 

  console.log("Home: --> mapStateToProps(): state is: " + state)
  return {
    sendOtpToken: state.calReducer.sendOtpToken,
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Home);

Regardless of where I stop the code execution with a break point, the props are always not defined. What's wrong with that code?

Keselme
  • 3,779
  • 7
  • 36
  • 68
  • 1
    It looks like error coming from while evaluating the function `_getCardAndBalance` why don't you share that method as well? – tmhao2005 Aug 24 '20 at 07:03
  • @tmhao2005 it's just an empty method with a console log, so that I can put a break point in it to check the props. – Keselme Aug 24 '20 at 07:09

0 Answers0