Blocks API JSX Map in Save function does not rerender

[frankastin2023]

Hi,

I am building a custom block, it is a hero slider.

In the parameters I am defining an attribute called slides which has an empty array as it's default value.

In the Edit function :

registerBlockType("fa-gutenberg-blocks/fa-01-hero-slider", {
  edit: Edit,
  save: Save,
});

It loads fine and I can create add new elements to it like so

const addSlide = () => {
    const emptySlide = {
      title: "",
      description: "",
      media: { url: "", id: null },
      ctaLabel: "",
      ctaURL: "",
      backgroundColor: "#CCC",
    };

    const newCurrentSlide = slides.length;

    setAttributes({
      slides: [...slides, emptySlide],
    });

    setTimeout(() => {
      setAttributes(
        {
          currentSlide: newCurrentSlide,
        },
        200
      );
    });
  };

However in the Save function it does not load an empty array the attribute is undefined. To try and solve this I set the slides attribute to an empty array if undefined, as I added objects to the slides array they appeared in the Save function. I then called a array map method on the slides in the returned JSX in the save function which returned some html for each array item. When I loaded the the block on the actual page (not the edit screen) it did not render the mapped JSX html, but the attribute slides does contain the updated array.

To see the full code view the repo here : ​https://github.com/frankastin2023/fa-hero-slider