React/Redux - TypeError: Cannot read property 'props' of undefined

Question

i am a new in React, i am trying to create a dynamic NavBar with CoreUI. for now i have a static array in my action, so i can see it shows up with no errors on the Navigation bar. but as soon as i run this i get an error. what i am trying to do is to create a new dynamic navigation bar and insert it into my static bar

// Admin Nav

import React, { Component } from "react";
import { getStoreType } from "../redux/actions/storeTypeActions";
import PropTypes from "prop-types";
import { connect } from "react-redux";

class AdminNav extends Component {
  static propTypes = {
    getStoreType: PropTypes.func.isRequired,
    storeType: PropTypes.object.isRequired,
  };

  componentDidMount() {
    this.props.getStoreType();
  }
}

console.log("AdminNav", this.props);

const mapStateToProps = (state) => ({
  storeType: state.storeType,
  auth: state.auth,
});

export default connect(mapStateToProps, { getStoreType })(AdminNav);

//Reducer

import { GET_STORETYPE, STORETYPE_LOADING } from "../actions/types";

const initialState = {
  items: [
    {
      title: true,
      name: "ADMINISTRATOR",
      wrapper: {
        // optional wrapper object
        element: "", // required valid HTML5 element tag
        attributes: {}, // optional valid JS object with JS API naming ex: { className: "my-class", style: { fontFamily: "Verdana" }, id: "my-id"}
      },
      class: "", // optional class names space delimited list for title item ex: "text-center"
    },
  ],
  loading: false,
};

export default function (state = initialState, action) {
  switch (action.type) {
    case GET_STORETYPE:
      return {
        ...state,
        loading: false,
      };
    case STORETYPE_LOADING: {
      return {
        ...state,
        loading: true,
      };
    }
    default:
      return state;
  }
}

//DefaultLayout.js

import React, { Component, Suspense } from "react";
import { Redirect, Route, Switch } from "react-router-dom";
import * as router from "react-router-dom";
import { Container } from "reactstrap";
import {
  AppAside,
  AppFooter,
  AppHeader,
  AppSidebar,
  AppSidebarFooter,
  AppSidebarForm,
  AppSidebarHeader,
  AppSidebarMinimizer,
  AppBreadcrumb2 as AppBreadcrumb,
  AppSidebarNav2 as AppSidebarNav,
} from "@coreui/react";


// Sidebar nav config (Owner/Admin)
    import admin_navigation from "../_nav-admin";
    // Routes Config
    import routes from "../../routes";
    import { connect } from "react-redux";
    import PropTypes from "prop-types";
    import { logout } from "../../redux/actions/authActions";

    const DefaultAside = React.lazy(() => import("./DefaultAside"));
    const DefaultFooter = React.lazy(() => import("./DefaultFooter"));
    const DefaultHeader = React.lazy(() => import("./DefaultHeader"));
    const AdminHeader = React.lazy(() => import("./AdminHeader"));

    class DefaultLayout extends Component {
      constructor(props) {
        super(props);
        this.state = {
          role: "",
          path: "",
          dashboard: [],
        };
      }
      loading = () => (
        <div className="animated fadeIn pt-1 text-center">Loading...</div>
      );

      static propTypes = {
        isAuthenticated: PropTypes.bool,
        auth: PropTypes.object.isRequired,
        logout: PropTypes.func.isRequired,
      };
    render() {
        const { isAuthenticated } = this.props.auth;
        // If NOT Authenticated, redirect to login
        if (!isAuthenticated) {
          this.props.history.push("/login");
        }
        const role = this.props.auth.user.role;

        return (
          <div className="app">
            <div className="app-body">
              <AppSidebar fixed display="lg">
                <AppSidebarHeader />
                <AppSidebarForm />
                <Suspense>
                    <AppSidebarNav
                      navConfig={admin_navigation}
                      {...this.props}
                      router={router}
                    />
               </Suspense>
 <AppFooter>
          <Suspense fallback={this.loading()}>
            <DefaultFooter />
          </Suspense>
        </AppFooter>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  auth: state.auth,
});

export default connect(mapStateToProps, { logout })(DefaultLayout);

Answer 1

Here is a problem, you trying to access this not in a class method.

console.log("AdminNav", this.props);