Html Question posted in
Some basic documentation can be found here.

Html – alert shows twice in react js

I have a puzzle game and it shows an alert once you are finished and then a confirm window asking if you want to solve another one. The problem that it shows this twice. I tried changing my index.js and remove the StrictMode but then it shows me "ResizeObserver loop completed with undelivered notifications." warning and the app doesn’t work like it was with StrictMode

my App.js

import React, { useState } from "react";
import "./App.css";
import "./puzzle.css";
import { JigsawPuzzle } from "react-jigsaw-puzzle/lib";
import "react-jigsaw-puzzle/lib/jigsaw-puzzle.css";
import catImg from "./cat.jpeg";
import elephantImg from "./elephant.jpg";
import carImg from "./car.jpg";
import kidsImg from "./kids.jpg";
import sheepImg from "./sheep.png";

const puzzleImages = [catImg, elephantImg, carImg, kidsImg, sheepImg];

function App() {
  const [imageIndex, setImageIndex] = useState(getRandomIndex());

  function getRandomIndex() {
    return Math.floor(Math.random() * puzzleImages.length);
  }

  const handlePlayAgain = () => {
    const confirmPlayAgain = window.confirm("Do you want to play another puzzle?");
    if (confirmPlayAgain){
    const newIndex = getRandomIndex();
    setImageIndex(newIndex);
}
else { 
    alert("Thank you for playing")
}
  };

  const handleSolved = () => {
    alert("Good job!");
    handlePlayAgain();
  };

  return (
    <>
      <h2 className="tag">Un-puzzle the pieces</h2>
      <JigsawPuzzle
        imageSrc={puzzleImages[imageIndex]}
        rows={2}
        columns={2}
        onSolved={handleSolved}
        className="jigsaw-puzzle"
      />
    </>
  );
}

export default App;

Index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();
Tags:

2

Answers


  1. 0

    The issue you are facing may be related to React StrictMode.
    "ResizeObserver loop completed with undelivered notifications," warning could be caused by some side effects that are not allowed within the StrictMode.
    One approach is solving this is to use setTimeout to delay the execution of the code that causes the issue. You can modify your handlePlayAgain function like this

        const handlePlayAgain = () => {
  const confirmPlayAgain = window.confirm("Do you want to play another puzzle?");
  if (confirmPlayAgain) {
    setTimeout(() => {
      const newIndex = getRandomIndex();
      setImageIndex(newIndex);
    }, 0);
  } else {
    alert("Thank you for playing");
  }
};
    Login or Signup to reply.
  2. 0

    Remove StrictMode from your index.js; you can find more information about it. here

    This is how your index.js should look like

    import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <App />
);

reportWebVitals();
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search