How to resolve Uncaught TypeError: _this.props.change is not a function error in React-Redux project?

Question

JavaScript

Good day to all! I'm doing a small project on React + Redux. Here is the component code.

class Container extends Component {
  constructor(props) {
    super(props);
  }
  handleChange = (event, { suggestion, suggestionValue, suggestionIndex, sectionIndex, method }) => {
    this.props.change(suggestionValue);
  }
  render() {
    return (
       <Provider store={store}>
         <form >
           <IntegrationAutosuggest label="Станция отправления" onSelected={this.handleChange} />
         </form>
       </Provider>
     );
  }
}
const mapStateToProps = (state) => {
  return {
    out: state.out,
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    change: (dispatch) => dispatch(changeOutStation(dispatch))
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(Container);
export const store = createStore(combineReducers(reducers));
ReactDOM.render(<Container />, document.getElementById("params"));
export { Container };

action code

export const changeOutStation = (station) => ({
  type: 'CHANGE_OUT_STATION', station
});

Throws an error when populating the IntegrationAutosuggest component
Uncaught TypeError: _this.props.change is not a function.
There is little experience in react. What am I doing wrong ?

Answer 1

The problem is that you are giving the Container component itself as input to the ReactDOM.render function, to which no parameters are passed, in particular change. The change parameter appears only after the connect is executed for this component, therefore, ReactDOM.render must also be passed what the aforementioned connect returns.