Issues with JSX syntax during React's TicTacToe tutorial

Question

While attempting React's TicTacToe tutorial (https://react.dev/learn/tutorial-tic-tac-toe) on my local development environment, I ran into this error message after copy-pasting the following from the tutorial's spec.

export default function Square() {
  return (
    <>
      <div className="board-row">
        <button className="square">1</button>
        <button className="square">2</button>
        <button className="square">3</button>
      </div>
      <div className="board-row">
        <button className="square">4</button>
        <button className="square">5</button>
        <button className="square">6</button>
      </div>
      <div className="board-row">
        <button className="square">7</button>
        <button className="square">8</button>
        <button className="square">9</button>
      </div>
    </>
  );
}

I was expecting to reach the next step of the tutorial, as it required 0 brainpower to copy-paste the code. I have no real experience with HTML, CSS, or JSX syntax, so I have no idea what this issue could be. I know those are important prerequisites but I intend to learn as I go.

If you have any idea as to what may be causing this error, I'd greatly appreciate it!

Are there any errors in the console after npm start? Are you in the browser page auto started by npm start? — John Williams, Apr 19 '23 at 07:33
What are you using in terms of Babel / Vite? Could you try adding `import React from 'react';` to the top of the file? — Ben Stephens, Apr 19 '23 at 08:07
@JohnWilliams no console errors. Just the one I've displayed. And yes, this is the auto-generated npm server. — Garrett Moore, Apr 21 '23 at 20:11
@BenStephens I added that line and nothing changed unfortunately. — Garrett Moore, Apr 21 '23 at 20:13
@GarrettMoore Open your `package.json` file. You should see something like `"react": "17.0.2"` in it. Here it's using React 17. Edit: Just noticed from another comment that you're using react 18. This should work in react 18 just fine. Perhaps you can try deleting your `node_modules` and `package-lock.json` file and run `npm install` after that to fix the issue — Spikatrix, Apr 24 '23 at 04:15

score -1 · Answer 1 · answered Apr 19 '23 at 07:58

-1

It looks like you want to wrap .board-row divs with React Fragments. You can check about Fragments here.

You can also use <React.Fragment></React.Fragment>

answered Apr 19 '23 at 07:58

Myo Myint Aung

49
3

1

The `<>...>` is a shorthand for ``. The code posted is already wrapped in that so this can't be the solution. – Taxel Apr 19 '23 at 08:03
@Taxel I think it could be if they have old React / Babel versions: https://stackoverflow.com/questions/48316365/react-fragment-shorthand-failing-to-compile – Ben Stephens Apr 19 '23 at 08:09
How do you check your react version @BenStephens ? My NodeJS version is 20.0.0. – Garrett Moore Apr 21 '23 at 20:09
@GarrettMoore Do you have a package.json file in the root of your project folder? There should be an entry under "dependencies" for React, probably also Babel or Vite. – Ben Stephens Apr 21 '23 at 20:26
@BenStephens it looks like I have React Version 18.0.0 – Garrett Moore Apr 21 '23 at 20:49
```{ "dependencies": { "react": "^18.0.0", "react-dom": "^18.0.0", "react-scripts": "^5.0.0" }, "main": "/index.js", "devDependencies": { "react-scripts": "1.0.0" }, "name": "ljg0t8", "description": null, "version": "0.0.0", "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" } }``` – Garrett Moore Apr 21 '23 at 20:52
@GarrettMoore It's probably worth adding your package.json to the question. – Ben Stephens Apr 22 '23 at 07:56

Issues with JSX syntax during React's TicTacToe tutorial

1 Answers1