useContextを使用したtodoアプリにおいて、グローバルなステート管理を実装したい

Question

前提・実現したいこと

react.jsを使用したtodoアプリにおいて、useContextを利用してグローバルなステート管理を実現しようとしているが、以下のエラーが出てしまい解決できておりません。

当方勉強不足のため、何がいけないのか掴みきれていない状況です。
皆様のお力をお貸しいただけますと幸いです。

問題点/エラー内容/エラー文章

エラー文章
TypeError: Cannot destructure property 'todoTitle' of 'Object(...)(...)' as it is undefined.
InputTodo.jsx
const {todoTitle,setTodoTitle,todoText,setTodoText,todoLimit,setTodoLimit,todoProgress,setTodoProgress} = useContext(TodoStatus)

該当ソースコード/コマンド

TodoStatus.jsx

import React, { createContext, useState } from 'react'
export const TodoStatus = createContext()
function TodosStatus({props}) {
  const {children} = props
  const [todoTitle,setTodoTitle]= useState("")
  const [todoText,setTodoText]= useState("")
  const [todoLimit,setTodoLimit]= useState("")
  const [todoProgress,setTodoProgress]= useState("")
  return (
    <>
      <TodoStatus.Provider value={{todoTitle,setTodoTitle,todoText,setTodoText,todoLimit,setTodoLimit,todoProgress,setTodoProgress}}>
        {children}
      </TodoStatus.Provider> 
    </>
  )
}
export default TodosStatus

InputTodo.jsx

import React, { useContext } from 'react';
import styled from 'styled-components';
import TodoStatus from './TodoStatusList';
import TodoStatusList from './TodoStatusList';
export const InputTodo =(props)=>{
  const {onClickAdd, disabled} = props;
  const {todoTitle,setTodoTitle,todoText,setTodoText,todoLimit,setTodoLimit,todoProgress,setTodoProgress} = useContext(TodoStatus)
  const onChangeTitleValue = (e)=>setTodoTitle(e.target.value);
  const onChangeTextValue = (e)=>setTodoText(e.target.value);
  const onChangeLimitValue = (e)=>setTodoLimit(e.target.value);
  return(
    <>
    <INputBlock>
      <INputArea>
        <TItle>入力してください</TItle>
        <INputTag autoFocus disabled={disabled} placeholder="titleを入力してください" value={todoTitle} onChange={onChangeTitleValue}></INputTag>
      </INputArea>
      <INputArea>
        <TExtArea disabled={disabled} placeholder="todoを入力してください" value={todoText} onChange={onChangeTextValue}></TExtArea>
      </INputArea>
      <INputArea>
        <INputTag disabled={disabled} placeholder="limitを入力してください" value={todoLimit} onChange={onChangeLimitValue}></INputTag>
        <br />
        <TodoStatusList />
          <BUtton disabled={disabled} onClick={()=>{
            onClickAdd(todoTitle,todoText,todoLimit, todoProgress)
            setTodoTitle('')
            setTodoText('')
            setTodoLimit('')
            setTodoProgress("未着手")
          }} >追加</BUtton>
      </INputArea>
    </INputBlock>
    </>
  )
};
const INputBlock = styled.div`
background-color: rgb(202, 211, 39);
width: 80%;
border-radius: 20px;
padding-bottom:10px;
`
const INputArea = styled.div`
margin: 20px;
`
const TItle = styled.p`
text-align: center;
font-size: 25px;
font-weight: bold;
color: #666;
`
const INputTag = styled.input`
border-radius: 20px;
border: none;
padding: 6px 20px;
outline:none
`
const TExtArea = styled.textarea`
border-radius: 20px;
border: none;
height: 80px;
width: 80%;
padding: 20px 20px;
outline:none
font-weight: bold;
`
const BUtton = styled.button`
border-radius: 20px;
  border: none;
  margin: 3px 5px 6px 3px;
  spacing: 4;
  &:hover{
    border-radius: 20px;
  border: none;
  background-color: blueviolet;
  color: white;
  cursor: pointer;
  }
`

想定している処理の流れ

①TodoStatus.jsxにてuseContextを使用、propsで受け取ったコンポーネントをコンシューマコンポーネントとして、その中でTodoState内の記述を使用できる様にした。
②InputTodo.jsxをcontextのオブジェクト.Providerで囲うことによって、TodoStatus.jsx内の記述を使用できる様にした。

InputTodo.jsxの９行目。

試したことや調べたこと

-undefinedになるため、todoTitleをキーとするオブジェクトを作成できない、という風にエラー文を読み取った。
-useStateを利用して初期値が空欄でもいい様にしている。
-useContextを導入するまではタスクの追加はうまく行えていたが、今回useContextを利用することでエラーが起きてしまう原因がわかりませんでした。

Answer 1

正確な原因はわからないのですが、export constと進めると正しく処理されないことがあります。

const TodoStatus = createContext()とexport {TodoStatus}を分けて書いてみたら改善しますでしょうか？

Comments

[kimch]

maisumakun　様
いつも大変お世話になっております。
>const TodoStatus = createContext()とexport {TodoStatus}を分けて書いてみたら改善しますでしょうか？

こちら、ご指摘いただきました通り以下の様に記述修正いたしました。
```TodoStatus.jsx
修正前
export const TodoStatus = createContext()

修正後
const TodoStatus = createContext()
export {TodoStatus}
```

以前、同じエラー（TypeError: Cannot destructure property 'todoTitle' of 'Object(...)(...)' as it is undefined.）と表示されたままになってしまいます。。。