TypeError: Cannot read property 'map' of undefined 0.1

Question

I'm following the tutorial on react.js and I got into this error I don't know what is the main cause behind this error

Thank you to everyone who contributes error:

TypeError: Cannot read property 'map' of undefined

 import { Link } from "react-router-dom";
  function About(props) {
   const leaders = props.leaders.map((leader) => {
       return <p>Leader {leader.name}</p>;
     });

I'm importing leaders data in the main component

Main component:

import React, { Component } from "react";
import Home from "./HomeComponent";
import Contact from "./ContactComponent";
import About from "./AboutComponent";
import Menu from "./MenuComponents";
import Dishdetail from "./DishdetailComponent";
import Header from "./HeaderComponent";
import Footer from "./FooterComponent";
import { Dishes } from "../shared/dishes";
import { Comments } from "../shared/comments";
import { Leaders } from "../shared/leaders";
import { Promotions } from "../shared/promotions";
import { Switch, Route, Redirect } from "react-router-dom";

class Main extends Component {
  constructor(props, context) {
    super(props, context);

    this.state = {
      dishes: Dishes,
      comments: Comments,
      promotions: Promotions,
      leaders: Leaders,
    };
  }

  render() {
    const HomePage = () => {
      return (
        <Home
          dish={this.state.dishes.filter((dish) => dish.featured)[0]}
          promo={this.state.promotions.filter((promo) => promo.featured)[0]}
          leader={this.state.leaders.filter((leader) => leader.featured)[0]}
        />
      );
    };

    const DishWithId = ({ match }) => {
      return (
        <Dishdetail
          dish={this.state.dishes.filter((dish) => dish.id === parseInt(match.params.dishId, 10))[0]}
          comments={this.state.comments.filter((comment) => comment.dishId === parseInt(match.params.dishId, 10))[0]}
        />
      );
    };
    return (
      <div>
        <Header />
        <Switch>
          <Route path="/home" component={HomePage} />
          <Route exact path="/menu" component={() => <Menu dishes={this.state.dishes} />} />
          <Route path="/menu/:dishId" component={DishWithId} />
          <Route exact path="/contactus" component={Contact} />
          <Route exact path="/aboutus" component={About} />
          <Redirect to="/home" />
        </Switch>
        <Footer />
      </div>
    );
  }
}

export default Main;

The leader's file:

export const Leaders = [
  {
    id: 0,
    name: "Peter Pan",
    image: "/assets/images/alberto.png",
    designation: "Chief Epicurious Officer",
    abbr: "CEO",
    featured: false,
    description:
      "Our CEO, Peter, credits his hardworking East Asian immigrant parents who undertook the arduous journey to the shores of America intending to give their children the best future. His mother's wizardry in the kitchen whipping up the tastiest dishes with whatever is available inexpensively at the supermarket, was his first inspiration to create the fusion cuisines for which The Frying Pan became well known. He brings his zeal for fusion cuisines to this restaurant, pioneering cross-cultural culinary connections.",
  },
  {
    id: 1,
    name: "Dhanasekaran Witherspoon",
    image: "/assets/images/alberto.png",
    designation: "Chief Food Officer",
    abbr: "CFO",
    featured: false,
    description:
      "Our CFO, Danny, as he is affectionately referred to by his colleagues, comes from a long-established family tradition in farming and produce. His experiences growing up on a farm in the Australian outback gave him a great appreciation for varieties of food sources. As he puts it in his own words, Everything that runs wins, and everything that stays, pay!",
  },
  {
    id: 2,
    name: "Agumbe Tang",
    image: "/assets/images/alberto.png",
    designation: "Chief Taste Officer",
    abbr: "CTO",
    featured: false,
    description:
      "Blessed with the most discerning gustatory sense, Agumbe, our CFO, personally ensures that every dish that we serve meets his exacting tastes. Our chefs dread the tongue lashing that ensues if their dish does not meet his exacting standards. He lives by his motto, You click only if you survive my lick.",
  },
  {
    id: 3,
    name: "Alberto Somayya",
    image: "/assets/images/alberto.png",
    designation: "Executive Chef",
    abbr: "EC",
    featured: true,
    description:
      "Award-winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences. He says, Put together the cuisines from the two craziest cultures, and you get a winning hit! Amma Mia!",
  },
];

This community is great

Answer 1

You are trying to iterate trough props.leaders which is undefined, it has to be array. In your scenario it seems there is a missing attribute and that's causing this issue.

Need to pass leaders to props in that <Route /> component as:

<Route exact path="/aboutus" component={<About leaders={this.state.leaders} />} />