React does not re-render updated map, even with different keys - reactjs

Question

May be it's a stupid issue, but I can't seem to see it.
I have a file input which uploads an image, and I receive from API multiple images resized into different dimensions.
Before the images are loaded, I don't have a 'file' property in the image object.
After they are loaded - I have the file property.
The problem is, when the resized images are loaded, the map still renders 'no-component'. Even when the key is changed...
Here is the code with some console debugging for more clarity:
{newsImages.map(image => {
console.log('Has file?', image.hasOwnProperty('file'))
const imageComponent = image.hasOwnProperty('file')
? 'has component' // (<AuthorizedImage fileId={image.file} />)
: 'no component';
console.log('Image component: ', imageComponent);
const key = image.label + (image.hasOwnProperty('file') ? image.file : '-');
console.log('Key: ', key);
return (
<div key={key}>
<FormUploadFile
label={`Image for ${image.label}`}
placeholder={"Choose image"}
onChange={value => console.log(value)}
/>
{imageComponent}
<br />
{key}
</div>
)
})}
So far so good. But the web page itself does not show the changes like you can see below:
EDIT: More details on the component. Here is how the images are processed:
const [newsImages, setNewsImages] = useState([]);
useEffect(() => {
Api.NewsImageSizes.List()
.then(response => {
let newsImages = [];
response['hydra:member'].forEach(size => {
newsImages.push({label: size.label})
})
setNewsImages(newsImages.reverse());
})
.catch(ErrorHandling.GlobalStateError);
}, []);
Then when a file is uploaded...
const generateNewsImages = (file) => {
Api.Files.Upload(file)
.then(response => {
Api.News.GenerateImages(response.id)
.then(response => {
response.images.forEach(image => {
newsImages.forEach((element, index) => {
if (element.label === image.label) {
element.file = image.file;
newsImages[index] = element;
}
})
})
console.log('Setting news images...', newsImages);
setNewsImages(newsImages);
})
.catch(ErrorHandling.GlobalStateError);
})
.catch(ErrorHandling.GlobalStateError);
}
And the console again:

Answer 1

Looks like you are mutating the state in the generateNewsImages function.
.then(response => {
response.images.forEach(image => {
newsImages.forEach((element, index) => { // <-- newsImages is state reference
if (element.label === image.label) {
element.file = image.file; // <-- mutation!!
newsImages[index] = element;
}
})
})
console.log('Setting news images...', newsImages);
setNewsImages(newsImages); // <-- save same reference back into state
})
When updating React state you must create shallow copies of all state (and nested state) that you are updating.
.then(response => {
const nextNewsImages = newsImages.slice(); // <-- shallow copy state
response.images.forEach(image => {
nextNewsImages.forEach((element, index) => {
if (element.label === image.label) {
nextNewsImages[index] = { // <-- new object reference
...nextNewsImages[index], // <-- shallow copy
file: image.file, // <-- update property
};
}
})
})
console.log('Setting news images...', nextNewsImages);
setNewsImages(nextNewsImages); // <-- save new
})