React Redux: 'X is not a function' after using mapDispatchToProps

Question

Very new to Redux. I'm following an example at my work place to try and create a Facebook Login button using a stateless component. I can't seem to do the basic thing of binding the clickHandler property to a function of any description. I've reduced it to a simply console log in the below example. Whatever I do, when I click the button I get 'clickHandler is not a function'. What am I doing wrong?

Component

import React from 'react';

const FacebookLoginComponent = (props) => {
    const {
        clickHandler
    } = props;
    return(
        <button className="btn btn-primary" onClick={ () => clickHandler() }>Say hello</button>
    )
}
export default FacebookLoginComponent;

Container

import { connect } from 'react-redux';
import FacebookLoginComponent from "../components/FacebookLogin";

const mapStateToProps = state => ({});
const mapDispatchToProps = dispatch => ({
    clickHandler: () => console.log('hello')
})

const FacebookLogin = connect(
    mapStateToProps,
    mapDispatchToProps,
)(FacebookLoginComponent);

export default FacebookLogin;

Answer 1

I suspect you might be using the unconnected FacebookLoginComponent by mistake instead of the connected FacebookLogin.

If you were using the FacebookLoginComponent and not passing in any props then clickHandler would indeed not be a function.