Redux: Couldn't map function to property

Question

function mapStateToProps(state) {
  return {
    phoneNumber: state.phoneNumber,
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({
      requestCall       // this is valid function
  }, dispatch)
}


class Home extends Component {
    constructor(props) {
        super(props);
        this.state = {
            phoneNumber: null
        };
    }
    render() {
        const { requestCall } = this.props;
        return (
            <div>
                <FlatButton label="Schedule" primary={true} onTouchTap={requestCall} value={this.state.phoneNumber}/>
            </div>
        )
    }
}

Home.propTypes = {
    requestCall: PropTypes.func.required
};

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

In a different file I will need to reference like this

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import Home from './app'
import configureStore from './store/configureStore';

const store = configureStore();

render(
  <Provider store={store}>
    <Home />
  </Provider>,
  document.getElementById('react-app')
);

And then I see this in console

Warning: Failed propType: Invariant Violation: Home: prop type requestCall is invalid; it must be a function, usually from React.PropTypes. Check the render method of Connect(Home).

What did I missed?

Answer 1

The issue is not with the prop, but with the prop type:

prop type requestCall is invalid; it must be a function, usually from React.PropTypes

The issue is specifically with the .required, which is not the correct property (so your prop type value is just undefined).

Change

Home.propTypes = {
    requestCall: PropTypes.func.required
};

to

Home.propTypes = {
    requestCall: PropTypes.func.isRequired
};