reactを使用したodoアプリにおいて、異なるコンポーネントのstateを自由に変更したい

Question

前提・実現したいこと

todoリストにおいて、ステータスの変更に応じて背景色を変更したい。

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

TypeError: setTodoStatus is not a function
onChangeTodoStatus
src/components/TodoStatus.jsx:7

該当ソースコード

InputTodo.jsx

import React from 'react';
import { useState } from 'react';
import styled from 'styled-components';
import TodoStatus from './TodoStatus';

export const InputTodo =(props)=>{
  const { onClickAdd, disabled} = props;
  
  const [todoTitle,setTodoTitle]= useState("");
  const [todoText,setTodoText]= useState("");
  const [todoLimit,setTodoLimit]= useState("");
  const [todoStatus,setTodoStatus]= useState("");


  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 />
        <TodoStatus  todoStatus={todoStatus} setTodoStatus={setTodoStatus}/>
          <BUtton disabled={disabled} onClick={()=>{
            onClickAdd(todoTitle,todoText,todoLimit, todoStatus)
            setTodoTitle('')
            setTodoText('')
            setTodoLimit('')
            setTodoStatus("未着手")
            
          }} >追加</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;
  }
`

IncompleteTodos.jsx

import React, { useState } from 'react';
import styled from 'styled-components';
import TodoStatus from './TodoStatus';
export const IncompleteTodos = (props) =>{
  const {incompleteTodos, onClickComplete, onClickDelete} = props;
  return(
    <>
    <INcompleteBlock>
      <TItle>todo一覧</TItle>
      <UL>
        {incompleteTodos.map((todo,index)=>{
          return(
          <INcompleteList key={index} 
            style={todo.status==="未着手"? {background:'#FF97C2'}
                  :todo.status==="進行中"? {background:'#E9FFA5'}
                  :todo.status==="解決済み"? {background:'#78FF94'}
                  :{background:'#EEEEEE'}
                }
            >
            <LIstGuide >
              <LI>No:{index+1}</LI>
              <LI>あと{todo.limit}日！</LI>
            </LIstGuide>
                {todo.status}
              <LI>Title:{todo.title}</LI>
              <LI>内容:{todo.text}</LI>
              <BUtton onClick={()=>onClickDelete(index)}>削除</BUtton>
              <BUtton onClick={()=>onClickComplete(index)}>編集</BUtton>
              <TodoStatus/>　　
          </INcompleteList>
);
        })}
      </UL>
    </INcompleteBlock>
    </>
  )
};

TodoStatus.jsx
import React from 'react'
import styled from 'styled-components';
function TodoStatus(props) {
const {todoStatus, setTodoStatus} = props
  const onChangeTodoStatus=(e)=>setTodoStatus(e.target.value);
  return (
    <>
      <SElect onChange={onChangeTodoStatus} value={todoStatus}>
        <option value="未着手">未着手</option>
        <option value="進行中">進行中</option>
        <option value="完了済み">完了済み</option>
      </SElect>
    </>
  )
}
export default TodoStatus
const SElect = styled.select`
border-radius: 20px;
font-weight:10px;
width:10%;
padding:5px;
margin-top:10px;
`

想定している処理の流れ

①InputTodo.jsxにてinputする際、title、text、limit、statusをタスク一つ一つのオブジェクトに持たせる。
②IncompleteTodos.jsxにおいて、先ほど作成したオブジェクトが表示される。
③InputTodo.jsxではステータスを設定するためにTodoStatus.jsxをインポートして、そのファイルにuseStateで設定したtodoStatusとsetTodoStatusを渡してブラウザ上でドロップダウンリストを表現している。
④IncompleteTodos.jsxにおいてもドロップダウンリストを表現しようとしたが、上記の様なエラーが出てしまい解決できていない。

エラー原因

IncompleteTodos.jsxにおいて TodoStatus.jsxを呼び出している箇所。
∵TodoStatus.jsxではInputTodo.jsxにおいて使用されているuseStateの値をpropsを使用しているが、IncompleteTodos.jsxにおいてはuseState等でInputTodo.jsxのstateの値を受け取っていないことが原因かと考えた。

試したことや調べたこと

-タスクに設定するstatusはInputTodo.jsxにおいて管理すべきだと考えており、子のコンポーネントにしかuseStateを渡せないため、IncompleteTodos.jsxではステータスの変更を行えないと考えた。

何か良い案等ありますでしょうか？
皆様のお力添えをいただけますと幸いです。
よろしくお願い致します。

Comments

[blo]

`TodoStatus.jsx`にpropsがありますが、どこからどのように渡ってくるのでしょうか？
また、useStateはどこで呼んでいますか?データの生成箇所が知りたいです。

[kimch]

blo　様

ご連絡ありがとうございます。
>`TodoStatus.jsx`にpropsがありますが、どこからどのように渡ってくるのでしょうか？
こちらは、新しく追加しました`InputTodo`コンポーネントにおいて`TodoStatus`を呼び出す際にpropsを渡しています。記述しておらず申し訳ありません。

>また、useStateはどこで呼んでいますか?データの生成箇所が知りたいです。
こちらに関しましても`InputTodo.jsx`において定義しております。

いただいたご指摘に関して、質問の方を修正させていただきました。
ご指摘ありがとうございました。