title: TypeError: Cannot destructure property 'isLoading' of 'Object(...)(...)' as it is undefined
body: <p>I want to build a loading spinner while request API with React, I use context in React to fetch API and make a <code>isLoading</code> state in the context but when I call isLoading in <code>App.js</code>. It have an error  TypeError: Cannot destructure property 'isLoading' of 'Object(...)(...)' as it is undefined. 
  the context.js</p>
  
  <pre class="lang-js prettyprint-override"><code>/* eslint-disable react/prop-types */
  /* eslint-disable no-underscore-dangle */
  import React, { useState, useEffect, createContext, useCallback } from 'react';
  import moment from 'moment';
  
  import { getResource } from '../api/resourceApi';
  import { getProject } from '../api/projectApi';
  import { getBooking, deleteBooking, updateBooking } from '../api/bookingApi';
  import { HEIGHT_BOOKING } from '../containers/App/constant';
  import { compareByDay, getNumberOfDay, isWeekend } from '../utils/Date';
  
  const CalendarContext = createContext();
  
  const CalendarProvider = props =&gt; {
    const [isDragLoading, setIsDragLoading] = useState(false);
    const [isLoading, setIsLoading] = useState(false);
    const [persons, setPersons] = useState([]);
    const [projects, setProjects] = useState([]);
    const [search, setSearch] = useState('');
    const [searchResult, setSearchResult] = useState([]);
    const [bookings, setBookings] = useState([]);
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [startDay, setStartDay] = useState(moment('2019-12-30', 'YYYY-MM-DD'));
    const [endDay, setEndDay] = useState(moment('2020-02-03', 'YYYY-MM-DD'));
    const [disabled, setDisabled] = useState(false);
    const [isHoverWorking, setIsHoverWorking] = useState(true);
    const [addBookingStatus, setAddBookingStatus] = useState(true);
    const [content, setContent] = useState({
      resource: [],
      booking: undefined,
      startDate: moment(),
      endDate: moment(),
    });
    const [start, setStart] = useState(0);
    const [end, setEnd] = useState(0);
    const [selecting, setSelecting] = useState(false);
    const [resourceStart, setResourceStart] = useState(0);
    const [first, setFirst] = useState(false);
    const [startCellDay, setStartCellDay] = useState(moment());
    const [lastDate, setLastDate] = useState(0);
    const [isHover, setIsHover] = useState(false);
    const [formIsOpening, setFormIsOpening] = useState(false);
    const [bookingId, setBookingId] = useState(null);
  
    const contentGlobal = () =&gt; content;
    const setContentGlobal = newContent =&gt; {
      setContent(newContent);
    };
    const hoverObject = {
      start,
      end,
      selecting,
      resourceStart,
      first,
      startCellDay,
      lastDate,
      isHover,
      formIsOpening,
      isHoverWorking,
      addBookingStatus,
    };
  
  
  
    const onDisabled = () =&gt; {
      setDisabled(!disabled);
    };
    const fetchResource = async () =&gt; {
      setIsLoading(true);
      const res = await getResource();
      const result = res.data.resources;
      const personsFilter = result.map(resource =&gt; {
        const person = {
          _id: resource._id,
          name: `${resource.name.first} ${resource.name.last}`,
          avatar: resource.avatar,
        };
        return person;
      });
      setPersons(personsFilter);
      setSearchResult(personsFilter);
      setIsLoading(false);
    };
    const fetchProject = async () =&gt; {
      setIsLoading(true);
      const res = await getProject();
      const result = res.data.projects;
      setProjects(result);
      setIsLoading(false);
    };
    const fetchBooking = useCallback(async () =&gt; {
      setIsLoading(true);
      const res = await getBooking(startDay, endDay);
      const result = res.data.bookings;
      const bookingsConvert = result.map(booking =&gt; {
        const schedule = {
          ...booking,
          project: booking.project,
          startDay: moment(booking.startDay),
          endDay: moment(booking.endDay),
        };
        return schedule;
      });
      setBookings([...bookingsConvert]);
      setIsLoading(false);
    }, [startDay, endDay]);
    const removeBooking = async id =&gt; {
      const newBookings = bookings.filter(booking =&gt; booking._id !== id);
      await deleteBooking(id);
      setBookings([...newBookings]);
    };
  
    const handleSetBookings = (booking, onAdd = true) =&gt; {
      if (onAdd) {
        setBookings([...bookings, booking]);
      } else {
        const filterBooking = bookings.filter(e =&gt; e._id !== booking._id);
        setBookings([...filterBooking, booking]);
      }
    };
  
    const updateSearch = event =&gt; {
      setSearch(event.target.value.toLowerCase());
    };
  
  
    function getBookingWithResource(date, indexResource) {
      const bookingsWithResource = bookings
        .filter(booking =&gt; {
          const isBookingBelongResource =
            booking.startDay.isSame(date, 'day') &amp;&amp;
            booking.resourceId === searchResult[indexResource]._id;
          return isBookingBelongResource;
        })
        .sort(
          // eslint-disable-next-line no-shadow
          (first, second) =&gt; compareByDay(second.endDay, first.endDay),
        );
      return bookingsWithResource;
    }
    useEffect(() =&gt; {
      fetchResource();
      return () =&gt; {};
    }, []);
    useEffect(() =&gt; {
      fetchBooking();
      return () =&gt; {};
    }, [fetchBooking]);
    useEffect(() =&gt; {
      fetchProject();
      return () =&gt; {};
    }, []);
    useEffect(() =&gt; {
      const filteredResults = persons.filter(
        item =&gt; item.name.toLowerCase().indexOf(search) !== -1,
      );
      setSearchResult(filteredResults);
    }, [search, persons]);
    return (
      &lt;CalendarContext.Provider
        value={{
  
          persons,
          projects,
          search,
          searchResult,
          updateSearch,
          bookings,
          setBookings,
          fetchBooking,
          handleSetBookings,
          getMaxTotalOverlapBooking,
          getBookingWithResource,
          getMarginTopBooking,
          isModalOpen,
          handleCloseModal,
          setStartDay,
          setEndDay,
          startDay,
          endDay,
          disabled,
          onDisabled,
          removeBooking,
          setBegin,
          updateOnDidDragBooking,
          contentGlobal,
          setContentGlobal,
          start,
          setStart,
          end,
          setEnd,
          selecting,
          setSelecting,
          resourceStart,
          setResourceStart,
          first,
          setFirst,
          startCellDay,
          setStartCellDay,
          lastDate,
          setLastDate,
          isHover,
          setIsHover,
          addBookingStatus,
          setAddBookingStatus,
          formIsOpening,
          hoverObject,
          hoverSetObject,
          isDragLoading,
          setIsDragLoading,
          bookingId,
          isLoading,
        }}
      &gt;
        {props.children}
      &lt;/CalendarContext.Provider&gt;
    );
  };
  export { CalendarProvider, CalendarContext };
  
  </code></pre>
  
  <p>App.js</p>
  
  <pre class="lang-js prettyprint-override"><code>import './App.css';
  import './containers/Header/Header.css';
  import React, { useContext, useEffect, useState } from 'react';
  
  import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
  import { ThemeProvider } from 'styled-components';
  import { theme } from './containers/common/AppStyle';
  import Header from './components/Header';
  import Dashboard from './containers/DashboardPage';
  import { CalendarContext } from './context/Calendar';
  
  const App = () =&gt; {
    const context = CalendarContext;
    const { isLoading } = useContext(context);
    console.log(isLoading);
    const [loading, setLoading] = useState(true);
    useEffect(() =&gt; {
      setLoading(false);
    }, []);
    if (loading) return null;
    return (
      &lt;ThemeProvider theme={theme}&gt;
        &lt;Router&gt;
          &lt;Header /&gt;
          &lt;Switch&gt;
            &lt;Route path="/dashboard" component={Dashboard} /&gt;
          &lt;/Switch&gt;
        &lt;/Router&gt;
      &lt;/ThemeProvider&gt;
    );
  };
  
  export default App;
  
  </code></pre>