TypeError: Cannot read property 'map' of undefined in react component

Question

Trying to map from a.json file. Keep getting TypeError: Cannot read property 'map' of undefined. I tried to define it like described Here , but no luck.

I can get JSON data to display on the screen when I change div to

            <div className="search">
                <pre><code>{JSON.stringify(industryList, null, 4)}</code></pre>
            </div>

Here is the code:

// @flow
import React from 'react';
import { Row, Col } from 'reactstrap';

import industryList from './industryList'; 



const AnalyticsDashboardPage = ({industryList = []}) => {


    return (   
        <React.Fragment>
            <div className="search">
                {industryList.load.map( (industryList) => (
                <div>
                <h3>{industryList}</h3> 
                </div>
                ))};
            </div>
        </React.Fragment>
    )};

export default AnalyticsDashboardPage;

industryList.json

{
 "industryList": [
  {
    "Industry": "Aerospace&Defense",
    "icon": "mdi mdi-shield-airplane-outline"
  },
  {
    "Industry": "Airlines",
    "icon": "mdi mdi-airplane-takeoff"
  },
  {
    "Industry": "AutoComponents",
    "icon": "mdi mdi-engine"
  },
  {
    "Industry": "Automobiles",
    "icon": "mdi mdi-car-estate"
  },
  {
    "Industry": "Banking",
    "icon": "mdi mdi-bank-outline"
  },
  {
    "Industry": "Building",
    "icon": "uil-building"
  }
]

Answer 1

With how you have things named there, the line

{industryList.load.map( (industryList) => (

should be

{industryList.industryList.map( (industryList) => (

(but I'd suggesting renaming the import to be called something other than industryList, as that's confusing to read).

You'd also need to delete the industryList prop in the component, that's shadowing the import. so the full correct file with some renames for clarity:

import React from 'react';
import { Row, Col } from 'reactstrap';

import industryListData from './industryList'; 



const AnalyticsDashboardPage = () => {


    return (   
        <React.Fragment>
            <div className="search">
                {industryListData.industryList.map( (industryListItem) => (
                <div>
                <h3>{industryListItem}</h3> 
                </div>
                ))};
            </div>
        </React.Fragment>
    )};

export default AnalyticsDashboardPage;