TypeError: Cannot destructure property 'isLoading' of 'Object(...)(...)' as it is undefined

Question

I want to build a loading spinner while request API with React, I use context in React to fetch API and make a isLoading state in the context but when I call isLoading in App.js . It have an error TypeError: Cannot destructure property 'isLoading' of 'Object(...)(...)' as it is undefined. the context.js

/* 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 => {
  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 = () => content;
  const setContentGlobal = newContent => {
    setContent(newContent);
  };
  const hoverObject = {
    start,
    end,
    selecting,
    resourceStart,
    first,
    startCellDay,
    lastDate,
    isHover,
    formIsOpening,
    isHoverWorking,
    addBookingStatus,
  };



  const onDisabled = () => {
    setDisabled(!disabled);
  };
  const fetchResource = async () => {
    setIsLoading(true);
    const res = await getResource();
    const result = res.data.resources;
    const personsFilter = result.map(resource => {
      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 () => {
    setIsLoading(true);
    const res = await getProject();
    const result = res.data.projects;
    setProjects(result);
    setIsLoading(false);
  };
  const fetchBooking = useCallback(async () => {
    setIsLoading(true);
    const res = await getBooking(startDay, endDay);
    const result = res.data.bookings;
    const bookingsConvert = result.map(booking => {
      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 => {
    const newBookings = bookings.filter(booking => booking._id !== id);
    await deleteBooking(id);
    setBookings([...newBookings]);
  };

  const handleSetBookings = (booking, onAdd = true) => {
    if (onAdd) {
      setBookings([...bookings, booking]);
    } else {
      const filterBooking = bookings.filter(e => e._id !== booking._id);
      setBookings([...filterBooking, booking]);
    }
  };

  const updateSearch = event => {
    setSearch(event.target.value.toLowerCase());
  };


  function getBookingWithResource(date, indexResource) {
    const bookingsWithResource = bookings
      .filter(booking => {
        const isBookingBelongResource =
          booking.startDay.isSame(date, 'day') &&
          booking.resourceId === searchResult[indexResource]._id;
        return isBookingBelongResource;
      })
      .sort(
        // eslint-disable-next-line no-shadow
        (first, second) => compareByDay(second.endDay, first.endDay),
      );
    return bookingsWithResource;
  }
  useEffect(() => {
    fetchResource();
    return () => {};
  }, []);
  useEffect(() => {
    fetchBooking();
    return () => {};
  }, [fetchBooking]);
  useEffect(() => {
    fetchProject();
    return () => {};
  }, []);
  useEffect(() => {
    const filteredResults = persons.filter(
      item => item.name.toLowerCase().indexOf(search) !== -1,
    );
    setSearchResult(filteredResults);
  }, [search, persons]);
  return (
    <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,
      }}
    >
      {props.children}
    </CalendarContext.Provider>
  );
};
export { CalendarProvider, CalendarContext };

App.js

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 = () => {
  const context = CalendarContext;
  const { isLoading } = useContext(context);
  console.log(isLoading);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    setLoading(false);
  }, []);
  if (loading) return null;
  return (
    <ThemeProvider theme={theme}>
      <Router>
        <Header />
        <Switch>
          <Route path="/dashboard" component={Dashboard} />
        </Switch>
      </Router>
    </ThemeProvider>
  );
};

export default App;

Answer 1

change:

value={{

        isLoading,
      }}

with

value={isLoading}