CODEWITHSUNDEEP
javascriptreactjs
Prototype
Prototype

Reputation: 17

ReactJS: "SyntaxError: Unexpected token "

I am very much new to React. The following is my first script.

But I am getting the following error.

Failed to compile

./src/components/Layout/index.js
Syntax error: Unexpected token (12:5)

  10 | const Layout = (props) => {
  11 |   return(
> 12 |     <>
     |      ^
  13 | 
  14 |    <Header />
  15 |    {props.children}

here is my Layout component code :

import React from 'react';
import Header from '../Header';


/**
* @author
* @function Layout
**/

const Layout = (props) => {
  return(
    <>

   <Header />
   {props.children}
   </>
   )

 }

export default Layout;

Any idea how to fix it?

Upvotes: 0

Views: 1273

Answers (1)

nima
nima

Reputation: 8925

try using Fragment which came from the React library.

it provides an empty tag like <> </> but older versions of the JSX Babel plugin didn’t understand it.

as mentioned in the question's comments, it's an issue with your babel plugin version.

import React, {Fragment} from 'react';
import Header from '../Header';

const Layout = (props) => {
  return(
    <Fragment>
      <Header />
      {props.children}
   </Fragment>
   )

 }

export default Layout;

Upvotes: 0

Related Questions