Uncaught ReferenceError: ｘ（変数） is not defined

発生したエラー

Uncaught ReferenceError: newCompleteTodo is not defined

発生したエラーの原因

存在しない変数を参照していた為
→newCompleteTodoという変数はないと言われている。

実装しようとしている機能と戻すボタンを押したときに発生したエラー

• 実装しようとしている機能
  戻すボタンを押したとき、未完了のリストに追加する。
• 戻すボタンを押したときに発生したエラー
  
• consoleログで配列は出力されたがその後に参照エラーが発生してしまっていた。

問題のコード

Todo.jsx

 const onClickBack = (index) =>{
            const newCompleteTodos = [...completeTodos];
            console.log(newCompleteTodos);
            newCompleteTodo.splice(index,1);
         
            const newInColmpleteTodos = [...incompleteTodos, completeTodos[index]];
            setcompleteTodos(newCompleteTodos);
            setIncompleteTodos(newInColmpleteTodos);
        }

修正箇所

newCompleteTodosという配列を操作するときにnewCompleteTodoになっていて配列名にsがなかったため末尾にsを付けた。

Todo.jsx

    newCompleteTodos.splice(index,1);

修正後コンソール結果

修正コード全体

Todo.jsx

const onClickBack = (index) =>{
            const newCompleteTodos = [...completeTodos];
            newCompleteTodos.splice(index,1);
         
            const newInColmpleteTodos = [...incompleteTodos, completeTodos[index]];
            setcompleteTodos(newCompleteTodos);
            setIncompleteTodos(newInColmpleteTodos);
        }

さいごに

エラーが解消し戻すボタンを押したとき、未完了のリストに追加することができた

また文法や参照エラーなどのエラーが出た際にはconsole.logを仕込んだり、変数名が間違っていないかなど基本的な部分を最初に確認することが大事であると感じた。