Getting issue in props as"Cannot read property 'map' of undefined"

Question

I am new to react. i have getting issue while passing the array containing object as props from one component to another component. Can u guys help me out in this ,

here is the code of card information component where i am passing value as prop

const CardsInformation = () => {
    const Baba = [
        {
            id: 'b1',
            header: 'Book 1 Name',
            image: 'https://www.google.com/search?q=engineering+books&rlz=1C1CHBF_enIN862IN862&sxsrf=ALeKk01jlMEcOr-2Vd0ev6RaoZZSAqMADg:1589729471894&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjO9dfjm7vpAhV8yjgGHR-zDCoQ_AUoAXoECBMQAw&biw=1536&bih=763#imgrc=OzVmsuZIvusEJM',
            discription: 'This book steps beyond the simple functions of the Clapper, introducing you to a number of products that can be used for everything from controlling lighting levels, watering your lawn, closing your drapes, and managing sundry appliances in your home.',
        }
    ];

    return (
        <div>
            <Card_tabs book={Baba}/>
        </div>
    )
}

here is another component where i am using the props and getting the issue as"Cannot read property 'map' of undefined" at {props.book.map}

const Card_tabs = (props) => {
   
       
            {props.book.map(user=>{
                return(<h1>{user.header}</h1>)
            })} 
       
    
}

Assuming I fix Card_tabs, that code works fine: https://codesandbox.io/s/keen-sun-ov1ft?file=/src/App.js (also for the record: I don't think the linked duplicate is particularly helpful; the code shown is broken, but it's clear that `props.book` will never be undefined, given that it's an array const) — , May 30 '20 at 09:07

score 0 · Answer 1 · answered May 30 '20 at 08:58

import ReactDOM from "react-dom";
import React from "react";

const App = () => {
  const Baba = [
    {
      id: "b1",
      header: "Book 1 Name",
      image:
        "https://www.google.com/search?q=engineering+books&rlz=1C1CHBF_enIN862IN862&sxsrf=ALeKk01jlMEcOr-2Vd0ev6RaoZZSAqMADg:1589729471894&source=lnms&tbm=isch&sa=X&ved=2ahUKEwjO9dfjm7vpAhV8yjgGHR-zDCoQ_AUoAXoECBMQAw&biw=1536&bih=763#imgrc=OzVmsuZIvusEJM",
      discription:
        "This book steps beyond the simple functions of the Clapper, introducing you to a number of products that can be used for everything from controlling lighting levels, watering your lawn, closing your drapes, and managing sundry appliances in your home."
    }
  ];

  return (
    <div>
      <CardTabs book={Baba} />
    </div>
  );
};

const CardTabs = ({ book }) => {
  return book.map(user => {
    return <h1>{user.header}</h1>;
  });
};

ReactDOM.render(<App />, document.getElementById("root"));

Why negative votes. This code absolutely works fine and solves the error — Ferin Patel, May 30 '20 at 09:05
I didn't dv. But I think somebody did because it is code only. — Ajeet Shah, May 30 '20 at 16:31
If it’s solves your issue. Please upvote and accept my answer. — Ferin Patel, May 31 '20 at 06:30

Getting issue in props as"Cannot read property 'map' of undefined"

1 Answers1