wordpress gutenberg validation error on save function

Question

so i am playing with wordpress gutenberg block dev. and already made some simple one. now i am trying to make a more complicated one of a slider. everything works untill the save function where i get validation error and a bizzare notice about EndTag which i do not get. this is my save function , for now i am just trying to save the slides titles. if i console log within the map, i do get what i want.

    save: function( props ) {
const { slides } = props.attributes; 
const id = props.attributes.id;

const displaySlides = slides.map((slide) => {
  return (
    <div>
      <span>{slide.title}</span>
    </div>
  )
});


return (
  <div>
    {displaySlides}
  </div>
)
},

and here is the error i get in my dev tools:

notice that the titles are there but still i get validation error!!

what an i missing here? and what is it the EndTag thing?

best regards

Ashiquzzaman Kiron Ashiquzzaman Kiron · Accepted Answer · 2018-10-10T09:09:09

Your edit function node list doesn't match up with save function node list. That's why you are getting this error. Look closely, there's a node list WP expected but it got a different node list.

wordpress gutenberg validation error on save function

1 Answers