Why do I get 'Cannot read property 'props' of undefined'?

In my create-react-app/redux I have a 'connected component':

import React from "react";
import "./App.css";
import { connect } from "react-redux";

function App() {
  debugger;
  const { datas } = this.props;

  debugger;
  return <div className="App">{datas}}</div>;
}

const mapStateToProps = state => {
  return {
    datas: state
  };
};

// const mapDispatchToProps = dispatch => {
//   return {
//     onRequestDog: () => dispatch({ type: "API_CALL_REQUEST_POST" })
//   };
// };

export default connect(
  mapStateToProps,
  {}
)(App);

The redux is configured in the index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import createSagaMiddleware from "redux-saga";
import { createStore, applyMiddleware } from "redux";
import { watcherSaga } from "./sagas";
import { Provider } from "react-redux";
import reducer from './redux.js'

//hookup saga
// create the saga middleware
const sagaMiddleware = createSagaMiddleware();

// dev tools middleware
const reduxDevTools =
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();

// create a redux store with our reducer above and middleware
let store = createStore(reducer, reduxDevTools );

// run the saga
//sagaMiddleware.run(watcherSaga);


ReactDOM.render(<Provider store={store}>
    <App />
  </Provider>, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();

When I run this app I see this in the console:

Cannot read property 'props' of undefined

How can I debug this issue/ what is the cause of it?

1 answer

  • answered 2019-07-18 14:40 Dupocas

    this is for class based components:

    function App(props) {
      debugger;
      const { datas } = props;
    
      debugger;
      return <div className="App">{datas}</div>;
    }