Warning: Unreachable code , using funtion component (Arrow function) in Reactjs 18

Question

I created a function component and return JSX in react 18, but I was getting a strange warning; that "Unreachable code"

const Header = () => {
  return 
    <div className="header">
        <div className="container">
            <h1>hello</h1>
        </div>
    </div>;
  
    
};

export default Header;

I was thinking it happened because of the missing parenthesis "()" but when I added it

const Header = () => {
  return (
       <div className="header">
        <div className="container">
            <h1>hello world!</h1>
        </div>
    </div>;
  ) 
    
};

export default Header;

And the error I got was

Parsing error: Unexpected token, expected "," (8:10) ')' expected. Declaration or statement expected.

Answer 1

That was because I added an unexpected ";" after my JSX When I removed it, It worked

const Header = () => {
  return 
    <div className="header">
        <div className="container">
            <h1>hello</h1>
        </div>
    </div> 
  
    
};

export default Header;

or

const Header = () => {
  return (
       <div className="header">
        <div className="container">
            <h1>hello world!</h1>
        </div>
    </div>
  ) 
    
};

export default Header;

I only removed the ";" semicolon after the JSX in the return statement