IonSlides with useState

Ionic Framework Ionic React
1

Hi, i have this code.

<IonSlides key="elSlide" pager={true} options={slideOpts}>
                    {infoDeportista.imagenes.map((imagen) => {
                      return (
                        <IonSlide
                          onClick={() => {
                            setInfoDeportista({
                              ...infoDeportista,
                              imagenes: infoDeportista.imagenes?.filter(
                                (foto) => foto.id !== imagen.id
                              ),
                            });
                          }}
                          key={String(imagen.id)}
                          style={{ position: "relative" }}
                          className="ion-padding"
                        >
                          <img className="bordeRedondo" src={imagen.url}></img>
                        </IonSlide>
                      );
                    })}
                  </IonSlides>

I want that when i click on the slide, the slider disappear. but im getting this error.
Uncaught DOMException: Node.removeChild: The node to be removed is not a child of this node
Only happens with the ionSlide… if i remove it works fine… greetings

2

Not sure but you could wait a frame like this:

const handleClick = useCallback(() => {
  requestAnimationFrame(() => {
    setInfoDeportista(...
  })
}, [])

return (
  <IonSlides...>
    <IonSlide onClick={handleClick}
 ...
)
3

the underlying swiperjs API does like you directly removing or adding slides in that manner. I spent a few hours trying all sorts of solutions but all failed

1 Like
4

I will try Max, thx.