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.

marc_s · Accepted Answer · 2022-10-14 11:14:03Z

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

edited Oct 14, 2022 at 11:14

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Oct 3, 2022 at 1:06

Akinbode Olusola

214 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

R. Mahbub Over a year ago

Is it solves your problem?

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related