TypeError: Cannot read properties of undefined (reading 'map') in React ... but the array is not empty

Question

I'm encountering this error - TypeError: Cannot read properties of undefined (reading 'map') on the AboutComponent.js. The array is coming from this exported leader.js file. The array is not empty but for some reason I'm experiencing this weird error.

MainComponent.js

import React, { Component } from 'react';
import { Switch, Route, Redirect } from 'react-router-dom';
import { DISHES } from '../shared/dishes';
import { COMMENTS } from '../shared/comments';
import { PROMOTIONS } from '../shared/promotions';
import { LEADERS } from '../shared/leaders';


class Main extends Component {

  constructor(props) {
    super(props);
    this.state = {
        dishes: DISHES,
        comments: COMMENTS,
        promotions: PROMOTIONS,
        leaders: LEADERS       
    }
  }

leaders.js

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 with the intention of giving their children the best future. His mothers wizardy 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 crosscultural 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 great appreciation for varieties of food sources. As he puts it in his own words, Everything that runs, wins, and everything that stays, pays!'
    }

  ];

AboutComponent.js

import React from 'react';
import { Breadcrumb, BreadcrumbItem, Card, CardBody, CardHeader, Media } from 'reactstrap';


function About(props) {


    const leaders = props.leaders.map((leader) => {
        return (
                <p>Leader {leader.name}</p>
        );
    });

    return(
        <div className="container">
            <div className="col-12">
                <Media list>
                    {leaders}
                </Media>
            </div>
        </div>
    );
}

export default About;    

Answer 1

In your main component js file do this:

Instead of <Route path='/aboutus' component={About} />

replace it with

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

Your current code doesn't pass any props hence why its undefined