Ad
API Fetch Update Only One Data
How can I update only one data through API? I want to change from status: 4
to status: 5
Here's my code
export const cancelRequest = async id => {
const response = await fetch(`API_URL/link/link/${id}`, {
method: 'put',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${Auth.getToken()}`,
},
});
return getData(response);
};
Calling it through another file
const onCancelRequest = async id => {
let cancelItem = dataAll.filter(item => item.id == id);
await TriggerRequestAPI.cancelRequest(id)
.then(data => {
data.json();
cancelItem[0].status = 5;
setIsAll(cancelItem);
})
.catch(error => console.log(error));
};
Ad
Answer
You need to update your item first then call the API:
const onCancelRequest = async id => {
const cancelItems = dataAll.filter(item => item.id == id);
if(cancelItems.length === 0) {
return;
}
// Update the item
cancelItems[0].status = 5;
// Then call the API
await TriggerRequestAPI.cancelRequest(id, cancelItems[0])
.then(data => {
return data.json();
})
.then(item => {
setIsAll(cancelItems);
})
.catch(error => console.log(error));
};
API:
export const cancelRequest = async(id, item) => {
const response = await fetch(`API_URL/link/link/${id}`, {
method: 'put',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${Auth.getToken()}`,
},
body: JSON.stringify(item) // item to update
});
return getData(response);
};
Ad
source: stackoverflow.com
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad