stateの状態をmap関数内で付与したい

Question

前提・実現したいこと

・reactで作成しているtodoリストにおいて、タスクそれぞれで異なるステータス（進行中、完了済みetc）を保持できる様にしたい。
当方勉強不足なのは重々承知なのですが、どうしても解決できなかったため、皆様のお力をお借りできたらと思い質問させていただきます。

何卒、よろしくお願い致します。

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

・ステータスの変更と背景色の変更が全てのタスクで共通して行われる。
<=>一つのtodoのみの進捗(useStateで管理しています)を変更することができない。

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

export const IncompleteTodos = (props) =>{
const [status,setStatus] = useState([0,1,2,3]);
  const {incompleteTodos, onClickComplete, onClickDelete} = props;
const statusValue = (e) =>{
  setStatus(e.target.value)
}

  return(
    <>
    <INcompleteBlock>
      <TItle>todo一覧</TItle>
      <UL>
        {incompleteTodos.map((todo,index)=>{
          return(
          <INcompleteList key={index} 
            style={status==="1"? {background:'#FF97C2'}
                  :status==="2"? {background:'#E9FFA5'}
                  :status==="3"? {background:'#78FF94'}
                  :{background:'#EEEEEE'}
                }
            >
            <LIstGuide >
              <LI>No:{index+1}</LI>
              <LI>あと{todo.limit}日！</LI>
            </LIstGuide>
              <LI>Title:{todo.title}</LI>
              <LI>内容:{todo.text}</LI>
              <BUtton onClick={()=>onClickDelete(index)}>削除</BUtton>
              <BUtton onClick={()=>onClickComplete(index)}>編集</BUtton>
              <select value={status[index]} onChange={statusValue}>　　　　
                <option selected value="0">選択してください</option>
                <option value="1">未着手</option>
                <option value="2">進行中</option>
                <option value="3">完了済み</option>
              </select>
          </INcompleteList>
);
        })}
      </UL>
    </INcompleteBlock>
    </>
  )
};
const INcompleteBlock = styled.div`
background-color: #88FFFF;
width: 80%;
border-radius: 20px;
padding-bottom:10px;
`
const TItle = styled.p`
text-align: center;
font-size: 25px;
font-weight: bold;
color: #666;
`

const UL = styled.ul`
width:80%;
`
const LI = styled.li`
list-style:none;
margin: 5px;
`
const INcompleteList = styled.div`
background-color: #EEFFFF;
  border-radius: 20px;
  padding: 15px;
  margin:10px;
`
const BUtton = styled.button`
border-radius: 20px;
  border: none;
  margin: 3px 5px 6px 3px;
  &:hover{
    border-radius: 20px;
  border: none;
  background-color: blueviolet;
  color: white;
}
  cursor: pointer;
`

const LIstGuide= styled.div`
display:flex
`

処理の流れ

①ドロップダウンリストでステータスの変更を行う。
②useStateのstateに変更が起こるため、レンダリングが起きる。
③pタグ内の三項演算子の記述により、選択したstateによって背景色が変更される。

エラー原因となり得る部分

・map関数内の記述。
→useStateによりステータスの管理を行っているが、一つ一つのtodoにおいてステータスのstateに一意性がないためではないかと考えた。

試したことや調べたこと

-map関数内で一意性を持たせるため、indexの記述をした。
このくらいしか思いつかず、map関数、一意性等検索したのですが、解決には至りませんでした。

Answer 1

statusに入れる値を一貫させましょう。

初期化では[0,1,2,3]と配列を入れているのに、statusValueでは1つの値にしてしまっています。

Comments

[kimch]

maisumakun　様

いつもアドバイスいただきありがとうございます。
承知しました。
statusValueで取得するのは一つの値ですので、useStateをuseState("")としました。

[maisumakun]

> statusValueで取得するのは一つの値ですので、useStateをuseState("")としました。

逆に、全部を配列で一貫させてください。

それぞれのタスクでバラバラの状態を記録させたいのであれば、stateが1つの値というのはおかしいです。

[kimch]

>それぞれのタスクでバラバラの状態を記録させたいのであれば、stateが1つの値というのはおかしいです。

おっしゃる通りですね。よく分かってなくて申し訳ないです。。。
質問させていただきたいのですが、statusValueでは、自身の認識ではoptionで記述している1~3の数字のどれかが、onChangeによって取得できていると考えていたのですが、これが間違えているということでしょうか？？？
何度も申し訳ないです。。。

[maisumakun]

> 自身の認識ではoptionで記述している1~3の数字のどれかが、onChangeによって取得できていると考えていたのですが、これが間違えているということでしょうか？？？

それは正しいです。得られた値を、配列の正しい位置にセットする必要があります。