Title: Using a function callback inside another function
Tags: javascript;reactjs;fetch-api
Question: I have my react element with a couple of functions inside. I want to use the callback of one function inside another function as a variable. Both functions are using Fetch API.
fetchA = () =&gt; {
var data = new FormData();
data.append('file', this.state.selectedFile, this.state.selcetedFile.name);
fetch('/files', {method: 'POST', body: data})
.then(response =&gt; {
return response.json()})
.then(function(json) {
console.log(json));})
.catch(function(error) {
console.log(error)
});
and
fetchB = () =&gt; {
fetch('/trust', {method: 'put', body: **HERE**})
.then(response =&gt; {
console.log('SUCCESS')})
.catch(function(error) {
console.log(error)
});
You can see in the body of the second fetch call is where i would like to reference the json that was generated in the response of my first function. Can anybody recommend a simple solution for this?
Comment: yes, right when fetch is done, i want to run fetchB with the response....i havent tried that yet and that was my first thought....but im new to React and wanted to make sure it was correct before trying

Comment: Do you want to call `fetchB` right away when `fetchA` is complete? Have you tried just calling `fetchB(json);`?

Here is the accepted answer: If you want to run fetchB with the result from fetchA right after fetchA is done, you can just call fetchB with the result of fetchA:
Example
class App extends React.Component {
fetchA = () =&gt; {
const { selectedFile } = this.state;
const data = new FormData();
data.append("file", selectedFile, selectedFile.name);
fetch("/files", { method: "POST", body: data })
.then(response =&gt; {
return response.json();
})
.then(result =&gt; {
this.fetchB(result);
})
.catch(error =&gt; {
console.log(error);
});
fetchB = data =&gt; {
fetch("/trust", { method: "put", body: data })
.then(response =&gt; {
console.log("SUCCESS");
})
.catch(error =&gt; {
console.log(error);
});
// ...

Here is another answer: You can use async/await to make it look like a synchronous operation.
fetchA = async () =&gt; {
var data = new FormData();
data.append('file', this.state.selectedFile, this.state.selcetedFile.name);
const response = await fetch('/files', {method: 'POST', body: data});
return await response.json();
fetchB = async () =&gt; {
const body = await fetchA();
fetch('/trust', {method: 'put', body})
.then(response =&gt; {
console.log('SUCCESS')})
.catch(function(error) {
console.log(error)
});

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 2, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2018:00:07/26/18', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><reactjs><fetch-api>', 'Title': 'Using a function callback inside another function', 'ViewCount': 68, 'id': 51544528, 'user_AboutMe': None, 'user_AccountId': 13682986.0, 'user_DisplayName': 'Hysii', 'user_Reputation': 622.0, 'user_Views': 69.0, 'user_id': 9872841.0}}