Question 50706 in Javascript Question posted in
A very good W3school tutorial can be found here.

React getting Syntax error on file Cell.js in the react app – Javascript

m following a tutorial by Ania Kubow but I ran into a bug if I try to run the react app. The error is in the Cell.js file of the project and I can’t figure out why.

Here’s the code:

const Cell = ({ id , cell, setCells, go, setGo, cells, winningMessage }) => {
    
    const handleClick = (e) => {
        const taken = e.target.firstChild.classList.contains("circle") ||
              e.target.firstChild.classList.contains("cross")
        
        if (!taken) {
            if (go === "circle") {
                e.target.firstChild.classList.add("circle")
                handleCellChange("circle")
                setGo("cross")
            }
            if (go === "cross") {
                e.target.firstChild.classList.add("cross")
                handleCellChange("cross")
                setGo("circle")
        }
    }
        const handleCellChange = (className) => {
           const nextCells = cells.map((cell, index) => {
                if (index === id) {
                    return className
                } else {
                    return cell
                }
            })
           setCells(nextCells)
        }
        
        return ( 
            <div className = "square" id={id} onClick={!winningMessage && handleClick}></div>
                <div className={cell}></div>
    ) 
}

export default Cell

Any help wouold be appreciated, I’m a React beginner and need much to learn.

Tags:

2

Answers


  1. 0

    It would be better if you mention the error here. But looking at the code there is one wrong thing and it’s that it doesn’t allow to return two items in single return.

    please wrap your both div into another div or <>{YOUR DIVs}</>

    Login or Signup to reply.
  2. 0

    You are missing a curly bracket in the function handleClick
    Also, a React component can return a single child element. To solve the issue of returning multiple markups, you can use React.Fragment to wrap your component. This will trick React algorithm, as you will be returning a single child element, but on HTML side, there will be no visible element wrapping your children. To learn more, visit Fragment Documentation

    Here is your fixed changes:

    const Cell = ({ id, cell, setCells, go, setGo, cells, winningMessage }) => {

    const handleClick = (e) => {
        const taken = e.target.firstChild.classList.contains("circle") ||
            e.target.firstChild.classList.contains("cross")

        if (!taken) {
            if (go === "circle") {
                e.target.firstChild.classList.add("circle")
                handleCellChange("circle")
                setGo("cross")
            }
            if (go === "cross") {
                e.target.firstChild.classList.add("cross")
                handleCellChange("cross")
                setGo("circle")
            }
        }
    }
    const handleCellChange = (className) => {
        const nextCells = cells.map((cell, index) => {
            if (index === id) {
                return className
            } else {
                return cell
            }
        })
        setCells(nextCells)
    }

    return (
        <React.Fragment>
          <div className="square" id={id} onClick={!winningMessage && handleClick}></div>
          <div className={cell}></div>
       </React.Fragment>
    )
}

export default Cell;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search