title: Cannot read properties of undefined (reading 'map') error when data fetching
body: <p>I have <code>companies.json</code> and I am trying to fetch data from it and then display the company names as a checkbox, so here is my parent component:</p>
  <pre><code>import React, { useEffect, useState } from &quot;react&quot;;
  import SimpleBox from &quot;../components/sub-components/SimpleBox&quot;;
  import BoxWithSearch from &quot;../components/sub-components/BoxWithSearch&quot;;
  import { useDispatch, useSelector } from &quot;react-redux&quot;;
  import { listProducts } from &quot;../actions/productActions&quot;;
  import { listCompanies } from &quot;../actions/companyActions&quot;;
  
  export default function HomeScreen() {
    const dispatch = useDispatch();
  
    const companyList = useSelector((state) =&gt; state.companyList);
    const {  companies } = companyList;
  
  
    useEffect(() =&gt; {
      dispatch(listCompanies());
    }, [dispatch]);
    return (
      &lt;div className=&quot;container&quot;&gt;
        &lt;div className=&quot;row&quot;&gt;
          &lt;div className=&quot;col-lg-3 col-md-12 col-sm-12 col-xs-12&quot;&gt;
            &lt;h3 className=&quot;title&quot;&gt;Brands&lt;/h3&gt;
            {companies.map((company) =&gt; (
              &lt;BoxWithSearch type={&quot;companies&quot;} company={company} /&gt;
            ))}
          &lt;/div&gt;
          
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>After BoxWithSearch component:</p>
  <pre><code>import React from &quot;react&quot;;
  import CheckBox from &quot;../custom-components/CheckBox&quot;;
  
  export default function BoxWithSearch(props) {
    return (
      &lt;div className=&quot;search-w-box card&quot;&gt;
        &lt;div className=&quot;card-header&quot;&gt;
          &lt;input type=&quot;text&quot; className=&quot;form-control&quot; placeholder={`Search ${props.type}`} aria-label=&quot;Recipient's username&quot;&gt;&lt;/input&gt;
        &lt;/div&gt;
        &lt;div className=&quot;card-body&quot;&gt;
            &lt;CheckBox text={props.name} /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  <p>And here it goes to the checkbox:</p>
  <pre><code>import React from &quot;react&quot;;
  
  export default function CheckBox(props) {
    const [isChecked, setChecked] = React.useState(false);
  
    const toggleCheck = (e) =&gt; {
      setChecked(e.target.checked || !isChecked);
    };
    return (
      &lt;&gt;
        &lt;label className=&quot;checkbox-container&quot;&gt;
          {props.text}
          &lt;input
            type=&quot;checkbox&quot;
            checked={isChecked}
            onChange={(e) =&gt; toggleCheck(e)}
            id={props.id}
          /&gt;
          &lt;span className=&quot;checkmark&quot;&gt;&lt;/span&gt;
        &lt;/label&gt;
      &lt;/&gt;
    );
  }
  </code></pre>
  <p>But unfortunately, I am getting:</p>
  <p><code>Uncaught TypeError: Cannot read properties of undefined (reading 'map') error and I have no idea why and it is getting me crazy.</code></p>
  <p>Could you please have a look? And my JSON array is like this:</p>
  <pre><code>[
    {
      &quot;slug&quot;: &quot;Dickens-Franecki&quot;,
      &quot;name&quot;: &quot;Dickens - Franecki&quot;,
      &quot;address&quot;: &quot;12158 Randall Port&quot;,
      &quot;city&quot;: &quot;East Maureenbury&quot;,
      &quot;state&quot;: &quot;NE&quot;,
      &quot;zip&quot;: &quot;74529&quot;,
      &quot;account&quot;: 31010023,
      &quot;contact&quot;: &quot;Lonzo Stracke&quot;
    },
    {
      &quot;slug&quot;: &quot;Weissnat-Schowalter-and-Koelpin&quot;,
      &quot;name&quot;: &quot;Weissnat, Schowalter and Koelpin&quot;,
      &quot;address&quot;: &quot;92027 Murphy Cove&quot;,
      &quot;city&quot;: &quot;Port Malachi&quot;,
      &quot;state&quot;: &quot;WY&quot;,
      &quot;zip&quot;: &quot;56670-0684&quot;,
      &quot;account&quot;: 81813543,
      &quot;contact&quot;: &quot;Kathryne Ernser&quot;
    },
  ]
  </code></pre>