CODEWITHSUNDEEP
javascriptjsonreactjsreduxreact-redux
surrealduck
surrealduck

Reputation: 87

React-redux map error TypeError: Cannot read property 'map' of undefined

I get the following error in my ReactJS code:

TypeError: Cannot read property 'map' of undefined

This is based on the following code:

import React, { Component } from "react";
import { connect } from "react-redux";
import { ListGroup, ListGroupItem } from "reactstrap";
import { bindActionCreators } from "redux";
import * as categoryActions from "../../redux/actions/categoryActions";

class CategoryList extends Component {
  componentDidMount() {
    this.props.actions.getCategories();
  }
  render() {
    return (
      <div>
        <h3>Categories</h3>
        <ListGroup>
          {this.props.categories.map(category => (
            <ListGroupItem key={category.id}>
              {category.categoryName}
            </ListGroupItem>
          ))}
        </ListGroup>
        <h5>The Category: {this.props.currentCategory.categoryName}</h5>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    currentCategory: state.changeCategoryReducer,
    categories: state.CategoryListReducer,
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: {
      getCategories: bindActionCreators(
        categoryActions.getCategories,
        dispatch
      ),
      changeCategory: bindActionCreators(
        categoryActions.getCategories,
        dispatch
      ),
    },
  };
}
export default connect(mapStateToProps)(CategoryList);

I don't know how can I fix this error. Can you help me please?

Upvotes: 1

Views: 226

Answers (4)

surrealduck
surrealduck

Reputation: 87

FIXED THE PROBLEMM! TY SO MUCH! I changed my code:

return (
          <div>
          <h3>Categories</h3>
          <ListGroup>
            {this.props.categories && this.props.categories.map(category => (
              <ListGroupItem key={category.id}>
                {category.categoryName}
              </ListGroupItem>
            ))}
          </ListGroup>
          <h5>The Category: {this.props.currentCategory.categoryName}</h5>
        </div>
        );

Thanks to Tom Duckworth and seagulls0125 !

Upvotes: 0

seagulls0125
seagulls0125

Reputation: 169

React tries to render the UI even if the data is undefiend or empty. You should simple Javascript syntax. Pls add ? in your render method.

<ListGroup>
          {this.props.categories?.map(category => (
            <ListGroupItem key={category.id}>
              {category.categoryName}
            </ListGroupItem>
          ))}
        </ListGroup>

Upvotes: 1

Tom Duckworth
Tom Duckworth

Reputation: 56

Try the following in your render function

return (
  <div>
    <h3>Categories</h3>
    <ListGroup>
      {this.props.categories && this.props.categories.map(category => (
        <ListGroupItem key={category.id}>
          {category.categoryName}
        </ListGroupItem>
      ))}
    </ListGroup>
    <h5>The Category: {this.props.currentCategory.categoryName}</h5>
  </div>
);

Upvotes: 1

bhuwan saoji
bhuwan saoji

Reputation: 49

before using map() use a condition to check that hook is having some value. If not condition will not work and nothing will be displayed and you will not get any error.

Upvotes: 1

Related Questions