First time useState not showing up on UI - reactjs

Question

My simplified code is below.
Goal: To display the names of the images that the user selects. The user selects an image, it is saved to a service, and I use a "put" request to get the images for that particular object, and then display the name. These steps are required for getting the names.
Issue: When I first select images via the "file upload button" (Form.Control), the image name(s) do not display on the #1 (commented as "#1: HERE!", at the bottom of code). When I go back and select more images, then #1 correctly displays the previously selected images AND the newly selected images (which is the correct behavior). My problem is that on the first selection, the image name is NOT being displayed.
const MyComponent = () => {
const [fileNames, setFileNames] = useState({});
// a service that calls gets the file names from objectId
const getFileNames = (objectId) => {
const input = { objectId: objectId };
fetch(service(), {
method: "PUT",
headers: {..(stuff here), "Content-Type": "application/json"},
body: JSON.stringify(input)
})
.then( res => { res.json() })
.then( resJson => {
if( //resJson has errors) {
//log error msg
else {
// problem is here????
setFileNames(resJson.results);
return resJson;
}
})
.catch( err => //stuff here)
}
const handleFileChange = (e) => {
// saves selected file(s) to particular objectId
saveFile(event.target.files), props.objectId, props.somethingelse);
getFileNames(props.objectID);
}
const showName = (file) => {
return (
<span> {file.name} </span>
)
}
return (
<div>
<Form.Control
type="file" multiple
onChange={ e=> {handleFileChange(e)} }
{/* bunch of the stuff here */}
/>
{/* ***********#1 - HERE!*************** */}
{fileNames.map( file => file.showName(file) )}
</div>
)
}

Answer 1

I suspect you are not waiting for the file to be saved before you get the filename. That's why perhaps the first save is empty?
const MyComponent = () => {
const [fileNames, setFileNames] = useState([]);
// This should be an array be default since you map over it later down
// make this an async function
const getFileNames = async (objectId) => {
const input = { objectId: objectId };
let resJson;
try {
const result = await fetch(service(), {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(input),
});
resJson = await result.json();
} catch (error) {
// TODO: error handling
}
if (resJson.error) { // TODO: fix me
//log error msg
} else {
setFileNames(resJson.results);
}
};
// this too should be an asnyc function
const handleFileChange = async (event) => {
// I assume saveFile is an async function
await saveFile(event.target.files, props.objectId, props.somethingelse);
// save the file here ^ and wait for it to finish saving
await getFileNames(props.objectID);
// after you saved the file get the filename now
};
const showName = (file) => {
return <span> {file.name} </span>;
};
return (
<div>
<Form.Control
type="file"
multiple
onChange={(e) => {
handleFileChange(e);
}}
/>
{/* bunch of the stuff here */}
{fileNames.map((file) => file.showName(file))}
</div>
);
};