How can I make a method wait for another method to finish?

Question

I have the following method in React and would like to complete the first two methods that uploads the images to cloudinary and sets the URL to the state as coded first before executing the API call addStudent since the update state values needs to be passed on.

Code below and intended order in comments. Currently if i look at Network in developer tools, it executes in correct order but last API call addStudent doesnt seem to wait until the setState's are executed in previous methods as it is crashing with base64 data.

How can I modify the below code to achieve the required order?

addStudent= e => {
  this.setState({step:0})  //renders a loading screen

  const files1 = Array.from(this.state.profilePic)
  const formData1 = new FormData()
  files1.forEach((file, i) => {
    formData1.append(i, file)}) 

  const files2 = Array.of(this.state.passportPhoto)
  const formData2 = new FormData()
  files2.forEach((file, i) => {
    formData2.append(i, file)})


//uploads profilePic to cloudinary and sets state to URL returned by the api call --> order 1
    fetch(`http://localhost:3030/image-upload`, {method: 'POST',body: formData1})
      .then(res => res.json())
      .then(images1 => {this.setState({profilePic: images1[0].url})})


//upload passportPic to cloudinary and sets state to URL returned by the api call --> order 2
      .then(fetch(`http://localhost:3030/imageUploadPassport`, {method: 'POST',body: formData2})
      .then(res => res.json())
      .then(images2 => {this.setState({passportPhoto: images2[0].url})})

//uses data in state objects above to enter data to SQL database  --> order 3
      .then(fetch(`http://localhost:3030/addStudent?profPicURL=${this.state.profilePic}&passportURL=${this.state.passportPhoto}`)
      .catch(err=>console.error(err))
      .then(this.setState({step:2008}))))   //displays a success screen

  }

Answer 1

 addStudent= async e => { this.setState({step:0}) //renders a loading screen const files1 = Array.from(this.state.profilePic) const formData1 = new FormData() files1.forEach((file, i) => { formData1.append(i, file)}) const files2 = Array.of(this.state.passportPhoto) const formData2 = new FormData() files2.forEach((file, i) => { formData2.append(i, file)}) const data1 = await fetch('http://localhost:3030/image-upload', {method: 'POST',body: formData1}); const image1 = await data1.json(); const data2 = await fetch('http://localhost:3030/imageUploadPassport', {method: 'POST',body: formData2}); const image2 = await data2.json(); const data3 = await fetch(`http://localhost:3030/addStudent?profPicURL=${image1[0].url}&passportURL=${image2[0].url}`); this.setState({step:2008}); }

Answer 2

Use Javascript Promises to wait for asynchronous functions.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise