Buggy tic tac toe game with ReactJS

Hello,
I have finished working on a tic-tac-toe game using ReactJS, I believe the program is correct and I have no error on the log, but my game stopped displaying and I don’t understand why, the only clue I have is these errors I see on the console which I don’t understand. If anyone has time to review my code for some explanation that would be greatly appreciated.


1 Like

seems as if you have the variable i being a function at some point, i’ll take a look through the code and tell you where this issue is coming from!


ok, from the looks of it, this is all an issue with webpack and very glitchy objects…

On click, the function handleClick will be passed an event

<Board squares={board} onClick={handleClick} />

But the function’s event parameter is named i and attempted to be used as an array index

    const handleClick = i => { //Access the currently clicked square
        const boardCopy = [...board];
        // If user click an occupied square or if game is won, return
        if (winner || boardCopy[i]) return;

The style.css errors are probably because there is no such file, and the 404 not found response is actually a html page, which the browser is trying to treat as a style sheet.

<link rel="stylesheet" href="style.css">
2 Likes

This post was flagged by the community and is temporarily hidden.