Nearly identical code producing different results.

[dababygaming]

I've been following your react tutorial and I've spent over an hour trying to figure out why my code doesn't work but the code I copied from your repo does. When I use my code, I am unable to delete items from the todo list; it produces an error saying deleteTodo is undefined in the console. But when I run the code from the repo, it works perfectly fine. I ran it through diffchecker.com and I was unable to find any differences between both pieces of code except for some spacing and semi-colons. Anyone able to help me out I feel like I'm going crazy.

Code below is from my TodoList.jsx file.

import { TodoItem } from "./TodoItem"

// doesn't work
// export function TodoList({ todos, toggleTodo, deleteTodo }) {
//     return (
//         <ul className="list">
//             {todos.length === 0 && "No Todos"}
//             {todos.map(todo => {
//                 return (
//                     <TodoItem 
//                         {...todo} 
//                         key={todo.id} 
//                         toggleTodo={toggleTodo} 
//                         deleteTode={deleteTodo} 
//                     />
//                 )
//             })}
//       </ul>
//     )
// }

// // copied from repo
export function TodoList({ todos, toggleTodo, deleteTodo }) {
    return (
        <ul className="list">
            {todos.length === 0 && "No Todos"}
            {todos.map(todo => {
                return (
                    <TodoItem
                        {...todo}
                        key={todo.id}
                        toggleTodo={toggleTodo}
                        deleteTodo={deleteTodo}
                    />
                );
            })}
        </ul>
    );
}

[FairyPenguin]

I'm checking the project and will update you.

[jashawnsyce]

Hey, was there ever any update to this? I'm getting a similar error where if there is one Todo in my list i'm able to check and uncheck it just fine. But when mulitple Todos are in the list it sudden doesn't work anymore and I get the "id is undefined" as an error, referencing the id prop from the todo item (todo.id)

[Jayakrishnan110]

{todos.map((todo) => {

try out this, the only thing missing in the code is the brackets of tod in todos.map.
In some, it does show an error if we don't give brackets!