Vfrdtyky

I'll post the code and make the question at the end.

SignUpScreen.js

export default class SignUpScreen extends Component {



constructor(props) {

  super(props);

}



validateConfirmationPassword() {

  const { username } = this.props;



  console.log("TEST >> " + username);

}



render() {

  const { username, password, email, confirmPassword } = this.props;



  <Input

    placeholder="Username"

    value={username}

    onChangeText= {(value) => this.props.onChangeText('username', value)}

  />



  <Button

    onPress={() => this.validateConfirmationPassword()}

  />

}

SignUpScreen_reducer.js

export default function reducer(state={

  username: '',

  email: '',

  password: '',

  confirmPassword: '',



  usernameError: false,

  emailError: false,

  passwordError: false,

}, action) {



const { type, payload } = action



switch(type) {



    case 'ON_CHANGE_UI_FIELD' : {

        return {...state, [payload.key]: payload.value}

    }

    default: {

        return state

    }

}

SignUpScreenContainer.js

const mapStateToProps = (state) => {

  return {

    ...state,

  }

}



const mapDispatchToProps = (dispatch) => {

  return {

    onChangeText: (key, value) => {

      dispatch(onChangeField(key, value))

    },

  }

}



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

SignUpScreen_actions.js

export function onChangeField(key, value) {

  return (dispatch) => {

    dispatch({type: 'ON_CHANGE_UI_FIELD', payload: {key, value}})

  }

}

PS: I removed part of the code that was unecessary (like buttons and input texts). If more code is needed, please let me know.

My question is: What am I doing wrong? I keep getting 'undefined' on my console.log("TEST") for username, password, email and everything else. I have my store set up correctly. Also I can see the values being received on the actions and on the reducer, with the correct 'key' and 'value'.

Any help would be appreciated. Thanks in advance.

You would need to do two things to resolve this issue. First as other have mentioned you need to bind validateConfirmationPassword() in the constructor to ensure the function has the proper context when being called by onPress:

constructor(props) {

  super(props);

  this.validateConfirmationPassword = this.validateConfirmationPassword.bind(this);

}

Second you would need to adjust how you area attempting to access username. You indicated that when you are logging state inside mapStateToProps(), you are seeing an object such as { "signUpScreenReducer": { "email": "", "emailError": false, "password": "", "passwordError": false, "username": "", "usernameError": false, }. You are trying to access username it as const { username } = this.props;, but everything is nested within property signUpScreenReducer. You would need to access it like:

const { username } = this.props.signUpScreenReducer;

Or you could change your mapStateToProps() to Object spread the actual properties of the signUpScreenReducer (state.signUpScreenReducer) object:

const mapStateToProps = ({ signUpScreenReducer }) => {

  return {

    ...signUpScreenReducer,

  }

}

You don't even need spread, you could just also:

const mapStateToProps = ({ signUpScreenReducer }) => signUpScreenReducer;

Hopefully that helps!

-Just Replace your validateConfirmationPassword function with below version.

validateConfirmationPassword = () => {

  const { username } = this.props;



  console.log("TEST >> " + username);

}

OR do binding for that function in constructor as below

constructor(props) {

  super(props);

  this.validateConfirmationPassword = this.validateConfirmationPassword.bind(this);

}