props are passed but are undefined when they are mapped

Question

When I map the array directly, I don't face any error but if I pass the same array through props, I face the error that "Cannot read property 'map' of undefined"

brands array

const brands = [
  {
    key: 1,
    Name: "Nike",
  },
  {
    key: 2,
    Name: "Adidas",
  },
  {
    key: 3,
    Name: "Apollo",
  },
  {
    key: 4,
    Name: "Puma",
  },
];

export default brands;

Parent Component

import React from "react";
import { Button, Checkbox } from "@material-ui/core";
import SimpleAccordion from "./simpleAccordion";
import "./Sidebar.css";
import brands from "./BrandNames";

function App() {
  console.log("I am in App component", brands);

  return (
    <React.Fragment>
      <div className="sidenav">
        <SimpleAccordion children="Categories" brands={brands} /> // here passing the props as brands
        <hr style={{ color: "#999999" }} />

        {/* <h1>Helooooooo</h1>
        {brands.forEach((brand) => {
          return <span>{brand.Name}</span>;
        })} */}

        {brands.map((brand, key) => {
          return (
            <div>
              <h1>{brand.Name}</h1>
              <h1>{brand.key}</h1>
            </div>
          );
        })}

        <h1>Helooooooo</h1>
   <SimpleAccordion children="Brands" />
        <hr style={{ color: "#999999" }} />
        <SimpleAccordion children="Stores" />
        <hr style={{ color: "#999999" }} />
        <SimpleAccordion children="Price" />
  
      </div>
    </React.Fragment>
  );
}

export default App;

Child Component

import React,{useState} from 'react';
import Accordion from '@material-ui/core/Accordion';
import AccordionSummary from '@material-ui/core/AccordionSummary';
import AccordionDetails from '@material-ui/core/AccordionDetails';
import Typography from '@material-ui/core/Typography';
 import AddIcon from '@material-ui/icons/Add';
 import CloseIcon from '@material-ui/icons/Close';
 import {Checkbox} from '@material-ui/core';
 import brands from './BrandNames';


export default function SimpleAccordion(props) {
    
   const[iconName,setIcon]= useState(false);
  
   function handleClick(){
     setIcon(!iconName);
   }

// shows data at first time but then becomes undefine 
console.log("here", props.brands)  
  


    return (
      <React.Fragment>

// Directly mapping the  (imported)"brands" array, no error
          {brands.map((brand, key) => {
          return (
            <div>
              <h1>{brand.Name}</h1>
              <h1>{brand.key}</h1>
            </div>
          );
        })}
        
// mapping props.brands array and there are errors.
          {props.brands.map((brand, key) => {
          return (
            <div>
              <h1>{brand.Name}</h1>
              <h1>{brand.key}</h1>
            </div>
          );
        })}

        <Accordion style={{boxShadow:"0px 0px 0px "}} >
          <AccordionSummary expandIcon={iconName ? <CloseIcon /> : <AddIcon/>} onClick={handleClick}>
            <Typography style={{color:"#333333",fontWeight:"bolder"}}>{props.children}</Typography >
          </AccordionSummary>
          <AccordionDetails >
            <Typography>

            </Typography>
          </AccordionDetails>
          </Accordion>
         
          </React.Fragment>
    
  );
}

If I don't use the props in the child component, it works fine. brands.map works fine but when props are used, props.brands give the errors i.e TypeError: Cannot read property 'map' of undefined. Why are the props giving me the errors...

Answer 1

I was rendering more than one SimpleAccordion component but only passing props to the first component. That's why the props were undefined when mapped as other components were not given the props.