react : Unexpected token, expected ","

October 24, 2023

I have simple Component :

import React,{Fragment, useState} from "react";  
import './AppClass.css';

const AppClass =(props) => {
    const [isTrue, setIsTrue] = useState(false)
    
    return(
        <>
            <hr/>
            <h1 className="h1-red"> 
                {props.msg}
            </h1>
        </>
        {isTrue &&
            <>
            </hr>
            </>
        }
    )
}

export default AppClass;

But it keep yeling this error:

SyntaxError: C:\dev\my\go_apps\udemy_go_react\react-apps\my-app\src\AppClass.js: Unexpected token, expected "," (14:8)
  12 |             </h1>
  13 |         </>
> 14 |         {isTrue &&
     |         ^
  15 |             <>
  16 |             </hr>
  17 |             </>
ERROR in ./src/AppClass.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):

Im doing all as expected ..

>Solution :

Your react tree should contain only one top level node. Try something like this:

import React,{Fragment, useState} from "react";  
import './AppClass.css';

const AppClass =(props) => {
    const [isTrue, setIsTrue] = useState(false);
    
    return(
        <>
            <hr/>
            <h1 className="h1-red"> 
                {props.msg}
            </h1>
            {isTrue &&
              <>
                <hr/>
              </>
            }
        </>
    )
}

export default AppClass;

Edit:
Plus you have used the tag </hr> which is treated as a closing tag in your example. Use <hr/> instead.