Setting state with React Hooks + Fetch API does not trigger re-render - reactjs

Question

I'm trying to learn React Hooks by building a simple Domain Availability checker. Specifically, I'm playing with useState()
The aim is just to have an input field where the user types a keyword, hits Enter, and then the app will run a fetch request for that keyword with a number of different domain endings.
Here is my App component (or check codesandbox here: https://codesandbox.io/s/5410rkrq1p)
const App = () => {
const domainEndings = [
".ws",
".ga",
".cf",
".tk",
".ml",
".gq",
".kz",
".st",
".fm",
".je"
];
const [domainString, setDomainString] = useState("");
const [domainsArray, setDomainsArray] = useState([]);
const [lookedUpDomainsArray, setLookedUpDomainsArray] = useState([]);
const handleDomainChange = event => {
setDomainString(event.target.value);
setDomainsArray(
domainEndings.map(ending => event.target.value.trim() + ending)
);
};
let testArray = [];
const runDomainLookup = url => {
return fetch(
`https://domainr.p.rapidapi.com/v2/status?domain=${url}&mashape-key=${myAPIKEY}`
)
.then(res => res.json())
.then(data => {
testArray.push({
url: data.status[0].domain,
status: data.status[0].status
});
setLookedUpDomainsArray(testArray);
});
};
const handleSubmit = e => {
e.preventDefault();
setLookedUpDomainsArray([]);
testArray = [];
domainsArray.map(eachDomain => runDomainLookup(eachDomain));
};
return (
<div>
<form onSubmit={handleSubmit}>
<input
value={domainString}
placeholder="type keyword then hit enter"
onChange={e => handleDomainChange(e)}
/>
</form>
{lookedUpDomainsArray &&
lookedUpDomainsArray.map((domain, index) => {
return (
<div key={index}>
{domain.url} is {domain.status}
</div>
);
})}
</div>
);
};
The bug that I'm experiencing is:
the state seems to be being set correctly (checked in React Dev Tools).
the first response from the mapped fetch requests is rendered correctly to the DOM
a re-render for the newly added state (from fetch request) is not triggered until the user presses a key in the input field
Here is a video demonstrating it : https://streamable.com/klshu
You will notice that the rest of the results don't appear until I start typing other characters into the input
Thanks in advance 🙏

Answer 1

Thanks! Yes I had tried Promise.all() however I wanted each fetch request to run separately (for example, if one fetch request times out, it would hold up ALL of the others).
Found a solution on Reddit
Essentially, when setting the state via Hooks, I should have passed in the previous state as so:
const runDomainLookup = url => {
return fetch(
`https://domainr.p.rapidapi.com/v2/status?domain=${url}&mashape-key=${myAPIKEY}`
)
.then(res => res.json())
.then(data => {
setLookedUpDomainsArray(prevArray => [
...prevArray,
{
url: data.status[0].domain,
status: data.status[0].status
}
]);
});
};
Working solution on CodeSandbox: https://codesandbox.io/s/51ky3r63x