react show job progress - reactjs

Question

I'm making requests inside a loop and would like to show its progress on a div:
import React, {useState, useEffect} from 'react';
import axios from 'axios';
function Job() {
const [part, setPart] = useState(0);
const [message, setMessage] = useState(null);
async function executeJob() {
const N_PARTS = 10;
for (let i = 0; i < N_PARTS; i++) {
setPart(i);
setMessage(`Current part: ${part}`);
await axios.post(`/parts/${i}/doit`);
}
}
return (
<>
<div>{message}</div>
<button onClick={executeJob}>Execute</button>
</>
);
}
When I run this, the requests were made correctly, but it doesn't display message correctly. I suspect that I can't set states sequentially this way and have to put it inside an effect. I'm new to using React hooks, please let me know the correct way.

Answer 1

I've made a simple example.
export default function App() {
const [ part, setPart] = React.useState(0);
async function execute(){
for await(let i of new Array(10).fill(0)){
setPart((prev)=>prev+1);
console.log(i);
await fetch(`https://randomuser.me/api`).then((data)=>{
console.log(data);
})
}
}
return (
<div className="App">
<h1>Hello CodeSandbox {part}</h1>
<button onClick={execute}>Excute</button>
</div>
);
}
Here is the same example in codesandbox
https://codesandbox.io/s/adoring-cannon-srppr
you can use for-loop with async-await.
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for-await...of