title: Issue in react component
body: <p>I have a problem in the following component, it seems that the component doesn't render and I get the following error in console: "Cannot read property 'operationalHours' of null". I don't get why operationalHours it's null.. maybe someone can help me with a posible solution for this issue.
  Here is the component:</p>
  
  <pre><code>import React, { useState, useEffect } from 'react';
  import Search from 'client/components/ui/Search';
  import { performSearchById } from 'client/actions/api/search';
  import { get } from 'lodash';
  import {
    SEARCH_STORE_NOT_CLOSED,
    SEARCH_STORE_OPEN_TEXT,
    SEARCH_STORE_CLOSED_TEXT
  } from 'app/client/constants/values';
  
  import DownArrow from 'components/UI/icons/DownArrow';
  
  import styles from './styles.module.scss';
  
  const StoreDetails = ({ storeInfo }) =&gt; {
    const [expanded, setIsExpanded] = useState(false);
    const [storeData, setStoreData] = useState(null);
  
    useEffect(() =&gt; {
      async function fetchData() {
        const storeId = storeInfo.store_id;
        const {
          data: {
            Location: {
              contactDetails: { phone },
              operationalHours
            }
          }
        } = await performSearchById(storeId);
        setStoreData({ phone, operationalHours });
      }
      fetchData();
    }, [storeInfo.store_id]);
  
    const infoText = expanded ? 'Hide details' : 'View details';
  
    function parseHours(hours) {
      const formattedHours = {};
      hours.forEach(dayObj =&gt; {
        const closed = get(dayObj, 'closed', '');
        const day = get(dayObj, 'day', '');
        if (closed === SEARCH_STORE_NOT_CLOSED) {
          const openTime = get(dayObj, 'openTime', '');
          const closeTime = get(dayObj, 'closeTime', '');
          if (openTime === null || closeTime === null) {
            formattedHours[day] = SEARCH_STORE_OPEN_TEXT;
          } else {
            formattedHours[day] = `${openTime}-${closeTime}`;
          }
        } else {
          formattedHours[day] = SEARCH_STORE_CLOSED_TEXT;
        }
      });
      return formattedHours;
    }
  
    const storeHours = storeData.operationalHours
      ? parseStoreHours(storeData.operationalHours)
      : '';
  
    return (
      &lt;div className={styles.viewStoreDetails}&gt;
        &lt;span
          className={expanded ? styles.expanded : undefined}
          onClick={() =&gt; setIsExpanded(!expanded)}
        &gt;
          &lt;DownArrow /&gt;
        &lt;/span&gt;
        &lt;div&gt;
          &lt;span className={styles.viewStoreDetailsLabel}&gt;{infoText}&lt;/span&gt;
          &lt;div&gt;
            {expanded &amp;&amp; (
              &lt;Search
                phoneNumber={storeData.phone}
                storeHours={storeHours}
              /&gt;
            )}
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    );
  };
  
  export default StoreDetails;
  </code></pre>