React JS: TypeError: Cannot read property 'map' of undefined

Question

TypeError: Cannot read property 'map' of undefined

I'm studying in a tutorial on Reactjs and want to add this about AboutUs page but when I do pass this component to the MainComponent I'm getting an error:

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

consider the following react code the AboutComponent.js file is:

function About(props) {
    const leaders = props.leaders.map((leader) => {
        return (
            <p>Leader {leader.name}</p>
        );
    });
    return(
        <div className="container">
            <div className="row">
                <Breadcrumb>
                    <BreadcrumbItem><Link to="/home">Home</Link></BreadcrumbItem>
                    <BreadcrumbItem active>About Us</BreadcrumbItem>
                </Breadcrumb>
                <div className="col-12">
                    <h3>About Us</h3>
                    <hr />
                </div>                
            </div>
            <div className="row row-content">
                <div className="col-12 col-md-6">
                    <h2>Our History</h2>
                    <p>Started in 2010, Ristorante con Fusion quickly established itself as a culinary icon par excellence in Hong Kong. With its unique brand of world fusion cuisine that can be found nowhere else, it enjoys patronage from the A-list clientele in Hong Kong.  Featuring four of the best three-star Michelin chefs in the world, you never know what will arrive on your plate the next time you visit us.</p>
                    <p>The restaurant traces its humble beginnings to <em>The Frying Pan</em>, a successful chain started by our CEO, Mr. Peter Pan, that featured for the first time the world's best cuisines in a pan.</p>
                </div>
                <div className="col-12 col-md-5">
                   ......
                </div>
                <div className="col-12">
                    <Card>
                        <CardBody className="bg-faded">
                            <blockquote className="blockquote">
                                <p className="mb-0">You better cut the pizza in four pieces because
                                    I'm not hungry enough to eat six.</p>
                                <footer className="blockquote-footer">Yogi Berra,
                                <cite title="Source Title">The Wit and Wisdom of Yogi Berra,
                                    P. Pepe, Diversion Books, 2014</cite>
                                </footer>
                            </blockquote>
                        </CardBody>
                    </Card>
                </div>
            </div>
            <div className="row row-content">
                <div className="col-12">
                    <h2>Corporate Leadership</h2>
                </div>
                <div className="col-12">
                    <Media list>
                        {leaders}
                    </Media>
                </div>
            </div>
        </div>
    );
}
export default About;

How do you declare your `` tag in the main component? Do you specify the leaders? For example `` with `leaders` being defined as an array in your main component? — simdrouin, Nov 08 '20 at 18:10

score 0 · Answer 1 · answered Nov 08 '20 at 16:35

0

I think you should check the props.leaders before render it like this

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

or

function About(props) {
     if (!props.leaders) return <div>Loading</div>
     const leaders = props.leaders.map((leader) => {
         return (
             <p>Leader {leader.name}</p>
         );
     }
 }

Because props.leaders might be undefined when you fetch from backend or some where else, and after component render it'll appear so when the first time render it show you the error Cannot read property 'map' of undefine

answered Nov 08 '20 at 16:35

Duong Pham

32
4

Thank you so much @Duong Pham for your quick reply!! It worked, and thanks for explaining the process too. – Mathiharan T Nov 09 '20 at 08:16
But now I'm finding that it's not moving to the second props.leaders.map((leader) => { return (
Leader {leader.name}
); It is getting stuck in the 1st : if (!props.leaders) return
Loading
and not returning anything (but the error vanished). How can i solve this? – Mathiharan T Nov 10 '20 at 06:31
codesandbox.io/s/3bs18 You can open my repository here and can check why it's not moving to the next props.leaders.map – Mathiharan T Nov 10 '20 at 09:54
const leaders = props.leader && props.leader.map((leader) => { return (

Leader {leader.name}

); }); – Duong Pham Nov 12 '20 at 03:23
There is a typo on props.leader instead of props.leaders in the About Component – Duong Pham Nov 12 '20 at 03:25

React JS: TypeError: Cannot read property 'map' of undefined

TypeError: Cannot read property 'map' of undefined

1 Answers1