last day (31 days later) » 

10:07 AM
0
A: How to remove data from API with HTTP Request [React TS]

Udith GunaratnaFirst, you need to pass the deleteProduct function as a prop to the HelpCard component. So in your HelpList.tsx, add another prop to the <HelpCard/> element as follows. <HelpCard key={adminhelpcard.id + i} title={adminhelpcard.title} url={adminhelpcard.url} thumbnail={adminhelpc...

 
Where / how would I put the top chunk of code in the HelpCard.tsx? or how would I pass the deleteproduct
 
It goes in your HelpList.tsx
 
@sorry I edited my comment
 
Updated my answer. In your HelpList.tsx's render method you already have a HelpCard element. Just add another prop to it as shown.
 
Adding "deleteProduct={this.deleteProduct} to <HelpCard/> gives the error that was added to my original question.
 
10:07 AM
You may need to modify your Props interface as well. Updated my answer with that.
 
The error remains even after updating the props with what you've shown.
hey, are you here?
So the error still remains even after changing the props
 
Not sure what's the reason. Can you try to set deleteProduct: null instead of deleteProduct: true in the state of HelpCard?
 
okay so for some reason, after I changed the interface Propps in the HelpList instead of card to what you set, the error went away for HelpCard and HelpList.tsx
but then i got a new one
The <HelpList/> is giving me an error on the HelpAdmin.tsx UI display
the error is

"
No overload matches this call.
Overload 1 of 2, '(props: Readonly<Props>): HelpList', gave the following error.
Type '{}' is missing the following properties from type 'Readonly<Props>': url, title, thumbnail, deleteProduct
Overload 2 of 2, '(props: Props, context?: any): HelpList', gave the following error.
Type '{}' is missing the following properties from type 'Readonly<Props>': url, title, thumbnail, deleteProductts(2769)
"
The code is as follow


interface Props {
url: string;
title: string;
thumbnail: string;
deleteProduct: (id: any) => void;
}

interface State {

}

export default class HelpAdminView extends Component<Props, State> {
state = {};
componentDidMount() {}

render() {
return (
<main>
<div className="box">
<HelpList />
</div>
</main>
);
}
}
 
No. This is incorrect. The reason for you to not see the previous error is, this error is happening before that
 
I see so I changed the prop back in help list, and the error isn't there
but i seem to be getting a routing error
Type error: Type '{}' is missing the following properties from type 'Readonly<Props>': url, title, thumbnail, deleteProduct TS2739
from this line
<Route path="/help-admin" render={() => <HelpAdminView />} />
| ^
okay so I've narrowed it down further
to this
cannot read property adminhelpcard of undefined
line 71 of my Helplist.tsx
 
10:23 AM
ok. Instead of
deleteProduct={this.deleteProduct},
use
deleteProduct={this.deleteProduct.bind(this)}
In Helplist.tsx
 
on my console I get this upon button click
HelpList.tsx:80 DELETE localhost:3000/videos 404 (Not Found)
since I'm using this
const options = {
method: "DELETE"
};
I thought this would be how I can delete from API
 
It is the convention to use DELETE method to delete a resource. But the API you are using should have implemented it that way for you to use it
Probably better to go through the documentation of the API and check how it's done.
 
I'm hosting a local API, it doesn't have its own unique method I don't think
 
ok. Then you may have to check the implementation of the API and find out how it is handling the deletes. Anyway since your original issue was resolved, can you please mark my answer as accepted?
And probably upvote it too :)
 
okay I see,
yeah perfect, you've helped me out a lot
thank you so much!
 
10:32 AM
cool
 

  last day (31 days later) »