CODEWITHSUNDEEP
javascriptreactjsreduxreact-reduxaxios
edmamerto
edmamerto

Reputation: 8165

React Redux debugging props

I am new to react and i've been trying to practice ajax calls, and I cannot get my props function to work. I am able to get the json data from the facebook response, I just cannot pass it in to the action. For brevity I trimmed down the code.

user-list.js

class UserList extends Component {

    responseFacebook(response) {
      console.log(response);
      this.props.login(response)
    }

    render() {
        return (
            <div>
                <FacebookLogin
                  appId="mysecretappid10239"
                  autoLoad={true}
                  fields="name,email,picture"
                  scope="public_profile,user_friends,user_actions.books"
                  callback={this.responseFacebook}
                />
            </div>
        );
    }
}

function mapStateToProps(state) {
    return {
        users: state.users.data,
        fetched: state.users.fetched
    };
}

function matchDispatchToProps(dispatch){
  return bindActionCreators({login: login}, dispatch);
}

export default connect(mapStateToProps, matchDispatchToProps)(UserList);

actions file:

I am trying to print the payload to see if it works.

export const login = (payload) => {
    console.log("$$$$$$$$$$$$$$$$$$$$$$$" + payload)
};

This is the error I get:

Uncaught TypeError: Cannot read property 'login' of undefined

Question:

How do I go about this pattern correctly without having the error?

Upvotes: 0

Views: 906

Answers (1)

Andrii Starusiev
Andrii Starusiev

Reputation: 7774

Change callback={this.responseFacebook} to callback={this.responseFacebook.bind(this)}.

Or, better, bind it in constructor.

class UserList extends Component {
    constructor(){
    super();
    this.responseFacebook = this.responseFacebook.bind(this);
    }
    responseFacebook(response) {
      console.log(response);
      this.props.login(response)
    }
    ...

Upvotes: 1

Related Questions