title: TypeError: Cannot read property '_context' of undefined
body: <p>I am creating a simple Todo List using React, Next.js, and TailwindCSS. For some reasons, I got this error: <code>TypeError: Cannot read property '_context' of undefined</code>.</p>
  <p>This error occurs in <code>TodoForm.js</code>. I have defined <code>showModal</code> in <code>index.js</code> using <code>TodoContext.Provider</code>, but why does this error occur?</p>
  <p><strong>TodoContext.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>import { createContext } from &quot;react&quot;;
  
  const TodoContext = createContext(null);
  
  export default TodoContext;
  </code></pre>
  <p><strong>index.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>import { useState } from &quot;react&quot;;
  
  import Modal from &quot;../components/Modal&quot;;
  import TodoForm from &quot;../components/TodoForm&quot;;
  import TodoList from &quot;../components/TodoList&quot;;
  import TodoContext from &quot;./TodoContext&quot;;
  
  export default function Home() {
    const [open, setOpen] = useState(true);
    const [alertType, setAlertType] = useState(&quot;success&quot;);
    const [alertMessage, setAlertMessage] = useState(&quot;&quot;);
  
    const showModal = (type, msg) =&gt; {
      setAlertType(type);
      setAlertMessage(msg);
      setOpen(true);
    };
  
    return (
      &lt;TodoContext.Provider value={{ showModal }}&gt;
        &lt;div className=&quot;flex flex-col min-h-screen py-2 w-full items-center&quot;&gt;
          &lt;TodoForm /&gt;
          &lt;Modal setOpen={setOpen} alertMessage={alertMessage} open={open} /&gt;
          &lt;TodoList /&gt;
        &lt;/div&gt;
      &lt;/TodoContext.Provider&gt;
    );
  }
  </code></pre>
  <p><strong>TodoForm.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>import { addDoc, collection, serverTimestamp } from &quot;@firebase/firestore&quot;;
  import { useContext, useState } from &quot;react&quot;;
  import { db } from &quot;../firebase&quot;;
  
  const TodoForm = () =&gt; {
    const [todo, setTodo] = useState({ title: &quot;&quot;, detail: &quot;&quot; });
    const { showModal } = useContext();
  
    const onSubmit = async () =&gt; {
      const collectionRef = collection(db, &quot;todos&quot;);
      const docRef = await addDoc(collectionRef, {
        ...todo,
        timestamp: serverTimestamp(),
      });
      setTodo({ title: &quot;&quot;, detail: &quot;&quot; });
  
      showModal(
        &quot;bg-blue-200&quot;,
        `Todo with id ${docRef.id} is added successfully! `
      );
    };
  
    return (
      &lt;div className=&quot;flex w-3/6 flex-col justify-center mt-6&quot;&gt;
        &lt;pre&gt;{JSON.stringify(todo)}&lt;/pre&gt;
        &lt;input
          id=&quot;title&quot;
          type=&quot;text&quot;
          placeholder=&quot;Title&quot;
          value={todo.title}
          onChange={(e) =&gt; setTodo({ ...todo, title: e.target.value })}
        /&gt;
        &lt;input
          id=&quot;detail&quot;
          type=&quot;text&quot;
          placeholder=&quot;Detail&quot;
          value={todo.detail}
          onChange={(e) =&gt; setTodo({ ...todo, detail: e.target.value })}
        /&gt;
        &lt;button
          type=&quot;button&quot;
          onClick={onSubmit}
        &gt;
          ADD A NEW TODO
        &lt;/button&gt;
      &lt;/div&gt;
    );
  };
  
  export default TodoForm;
  </code></pre>
  <p><strong>Modal.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>import { Fragment, useRef, useState } from &quot;react&quot;;
  import { Dialog, Transition } from &quot;@headlessui/react&quot;;
  import { ExclamationIcon } from &quot;@heroicons/react/outline&quot;;
  
  export default function Modal({ setOpenClick, alertMessage, open }) {
    const cancelButtonRef = useRef(null);
  
    return (
      &lt;Transition.Root show={open} as={Fragment}&gt;
        &lt;Dialog
          as=&quot;div&quot;
          className=&quot;fixed z-10 inset-0 overflow-y-auto&quot;
          initialFocus={cancelButtonRef}
          onClose={setOpenClick}
        &gt;
          &lt;div className=&quot;flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0&quot;&gt;
            &lt;Transition.Child
              as={Fragment}
              enter=&quot;ease-out duration-300&quot;
              enterFrom=&quot;opacity-0&quot;
              enterTo=&quot;opacity-100&quot;
              leave=&quot;ease-in duration-200&quot;
              leaveFrom=&quot;opacity-100&quot;
              leaveTo=&quot;opacity-0&quot;
            &gt;
              &lt;Dialog.Overlay className=&quot;fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity&quot; /&gt;
            &lt;/Transition.Child&gt;
  
            {/* This element is to trick the browser into centering the modal contents. */}
            &lt;span
              className=&quot;hidden sm:inline-block sm:align-middle sm:h-screen&quot;
              aria-hidden=&quot;true&quot;
            &gt;
              &amp;#8203;
            &lt;/span&gt;
            &lt;Transition.Child
              as={Fragment}
              enter=&quot;ease-out duration-300&quot;
              enterFrom=&quot;opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95&quot;
              enterTo=&quot;opacity-100 translate-y-0 sm:scale-100&quot;
              leave=&quot;ease-in duration-200&quot;
              leaveFrom=&quot;opacity-100 translate-y-0 sm:scale-100&quot;
              leaveTo=&quot;opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95&quot;
            &gt;
              &lt;div className=&quot;inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full&quot;&gt;
                &lt;div className=&quot;bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4&quot;&gt;
                  &lt;div className=&quot;sm:flex sm:items-start&quot;&gt;
                    &lt;div className=&quot;mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10&quot;&gt;
                      &lt;ExclamationIcon
                        className=&quot;h-6 w-6 text-red-600&quot;
                        aria-hidden=&quot;true&quot;
                      /&gt;
                    &lt;/div&gt;
                    &lt;div className=&quot;mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left&quot;&gt;
                      &lt;div className=&quot;mt-2&quot;&gt;
                        &lt;p className=&quot;text-sm text-gray-500&quot;&gt;{alertMessage}&lt;/p&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
                &lt;div className=&quot;bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse&quot;&gt;
                  &lt;button
                    type=&quot;button&quot;
                    className=&quot;w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:text-sm&quot;
                    onClick={() =&gt; setOpenClick(false)}
                  &gt;
                    Deactivate
                  &lt;/button&gt;
                  &lt;button
                    type=&quot;button&quot;
                    className=&quot;mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm&quot;
                    onClick={() =&gt; setOpenClick(false)}
                    ref={cancelButtonRef}
                  &gt;
                    Cancel
                  &lt;/button&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/Transition.Child&gt;
          &lt;/div&gt;
        &lt;/Dialog&gt;
      &lt;/Transition.Root&gt;
    );
  }
  </code></pre>
  <p>Would you let me know what I am missing here?</p>
  <p>This is the image of showing error when using <code>const showModal = useContext(TodoContext)</code> on <code>TodoForm.js</code></p>
  <p><a href="https://i.stack.imgur.com/FmEae.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/FmEae.png" alt="enter image description here" /></a></p>