Undefined parameter error when trying to delete

[emilycentko]

Ticket MUST be completed before getting help from an instructor

Name: Emily

Breakout Room: Emily

Have you searched the other issue tickets? If not, do that first.

• [x] Yes
• If No, stop and search.

REQUIRED Add Tags to Issue Ticket and Assign to Project Board

• [x] Added to c46 Help-Thread project board
• [ ] Added the Blocker label if this is stoping you from moving forward

REQUIRED Describe your issue:

"watchList" is coming up undefined in my delete fetch calls. I need to delete both watchLists and watchListMovies (join table) for each watch list when delete button is clicked, and it looks like I'm running into an anonymous function. I have a delete function in both WatchList and WatchListMovies Providers

REQUIRED Copy/paste any error messages that appear:

TypeError: Cannot read property 'id' of undefined

REQUIRED What have you googled? (You must have at least 3 links related to your issue)

• [ ] 1. https://medium.com/@stevemao/do-not-use-anonymous-functions-to-construct-react-functional-components-c5408ec8f4c7
• [ ] 2. https://dev.to/abdulbasit313/learn-how-to-create-react-js-table-with-hooks-that-has-delete-functionality-too-2jjb
• [ ] 3. https://forum.freecodecamp.org/t/reactjs-how-to-delete-from-database/151400

REQUIRED: What have you tried? Tell us everything you have tried.

Tried multiple ways of fetch calls, embed and expand, tried putting watchListId as a parameter inside my button, storing it in a variable inside my map with "let =", storing them as parameters within the delete function, and setting initial state.

REQUIRED: Copy/paste link TO THE FILE on your branch that you are having issues with

https://github.com/emilycentko/watchlist/blob/ec-delete-watchlist/src/components/watchlists/WatchList.js

Code Snippet

 const handleDelete = (watchListMovie, watchList) => {
        deleteWatchListMovie(watchListMovie.watchListId)
        .then(deleteWatchList(watchList.id))
        }

...

<button onClick=
                                    {handleDelete (watchListId)}
                                >Delete WatchList
                                </button>

[jakefroeb]

your function handleDelete takes two parameters watchListMovie and watchList, but when you call the function onClick you are only passing in one, watchListId.... which isnt even used in your function so i would take a step back and ask yourself what information do i need in this function and then give the function that data in the parameters

[emilycentko]

@jakefroeb I also tried plugging in both parameters into the function. I need to delete both the 1 watch list object as well as the array of watchlistmovie objects associated with that watch list. I wasn't sure if I needed two separate fetch calls to handle in the delete to be able to delete the appropriate data on click? I've tried quite a few things and it keeps coming up as undefined, so I'm not sure about the direction I need to head in.

[jisie]

@emilycentko json-server will do cascade delete for you. That means you only need to delete a watchlist and it will delete all items from the join table with that watch list id for you. So all you need is the HTTP DELETE fetch call to delete the watch list.

Deleting a movie from the watchlist (without deleting the watchlist itself) is a separate feature and should not be combined with deleting a watchlist.

[emilycentko]

@jisie thank you, that's good to know! I tried that initially, just one DELETE fetch call from WatchListProvider. It would still give me the error that the id interpolated in my fetch call is undefined when I click the button that calls handleDelete. I've refactored it again to have the one delete function, tried leaving parameters empty, storing it in a parameter, and setting the initial state for watchList, but I keep getting a 404 error with my DELETE request.

[jisie]

@emilycentko The onClick on your button needs to be given a function expression, not a function call. But you still need to pass in the id of the watch list to be deleted:

<button onClick=
                                    {() => deleteWatchList(watchList.id}
                                >Delete WatchList
                                </button>

[emilycentko]

@jisie thank you, that worked! Is it because I need to pass a parameter to the function that it needs to be a function expression (instead of a call)?

[jisie]

@emilycentko It always needs to be a function expression. Remember, this is like an event handler in JS. You never call the function yourself. You just give it the function to be called when the click happens. I had you write the function in line with the JSX because that way you can access the watch list id that you have in your callback function for the .map.

[Scott47]

@emilycentko Looks like you are good to go, here. Please close this out when you have a moment if this is resolved.