I am having Trouble Mapping a created array in React and am trying to spread it (but to no avail)

Question

I have a system set up here were clicking a the save button grabs a div and makes a usable image file. I know this works because I have gotten it to work in with an individual image. I now have it set up to use with multiples of the same image but I can't seem to get it to map anything. I have been reading about spreading, and I am attempting to do that but its still not working for me. I have run into this struggle before and I would love if some one could explain why this doesn't work. I am using react hooks. I also know that the state is updating and as far as I can tell is correct. I am about 99% sure the problem is in the mapping.

import React, { useState } from "react";
import "./Favorites.css";
import htmlToImage from "html-to-image";
import FileBase64 from "react-file-base64";

function Favorites(props) {
  const [files, setfiles] = useState([]);

  const newspreadarray = [...files];
  const getimage = () => {
    var htmlToImage = require("html-to-image");

    var node = document.getElementById("mymodal153");

    htmlToImage
      .toPng(document.getElementById("mymodal153"), { quality: 0.01 })
      .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        console.log(dataUrl);
        let newarray = files;
        newarray.push(dataUrl);
        console.log(newarray);
        setfiles(newarray);
      })
      .catch(function (error) {
        console.error("oops, something went wrong!", error);
      });
  };

  return (
    <div>
      <span onClick={getimage} className="minize close">
        save &minus;
      </span>
      <div className="imageholder">
        <div id="mymodal153">
          <img src="https://i.imgur.com/LFXgB63.png" class="dinoimage" />
          <h1>Cool</h1>
          <p>hi this is some example text</p>
        </div>
        <div id="imageplacer"></div>
        {newspreadarray.map((post, index) => (
          //we can fiddle with sizes here :)
          <img src={post} key={index} />
        ))}
      </div>
    </div>
  );
}

export default Favorites;

Answer 1

The issue is that you are mutating state.

.then(function (dataUrl) {
    var img = new Image();
    img.src = dataUrl;
    console.log(dataUrl);
    let newarray = files; // <-- reference to state
    newarray.push(dataUrl); // <-- mutation
    console.log(newarray); // <-- save same reference back to state
    setfiles(newarray);
})

or more succinctly

setfiles([...files, dataUrl]);

You should create a new array reference

.then(function (dataUrl) {
    var img = new Image();
    img.src = dataUrl;
    console.log(dataUrl);
    const newarray = [...files]; // <-- spread existing state into new array
    newarray.push(dataUrl); // <-- append new element
    console.log(newarray);
    setfiles([...files, dataUrl]); // <-- save new reference to state
  })

This is also a pretty useless line

const newspreadarray = [...files];

You can simply

{files.map((post, index) => (
  //we can fiddle with sizes here :)
  <img src={post} key={index} />
))}