Closed emilycentko closed 3 years ago
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
@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.
@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.
@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.
@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>
@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)?
@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.
@emilycentko Looks like you are good to go, here. Please close this out when you have a moment if this is resolved.
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.
REQUIRED Add Tags to Issue Ticket and Assign to Project Board
c46 Help-Thread
project boardBlocker
label if this is stoping you from moving forwardREQUIRED Describe your issue:
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)
REQUIRED: What have you tried? Tell us everything you have tried.
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