CODEWITHSUNDEEP
reactjsnext.js
DatCra
DatCra

Reputation: 373

JSX error: Unexpected Token, expected ","

I'm running into an unexpected error while writing JSX functional component with NextJS. As soon as I insert a different component in my code, it would return "Unexpected token" error.

I've tried adding {}, (), change to function Entries(){}, move the mockList into the function, but none worked. I'm still receiving this error once I place another component inside the return.

Function component Entries 

import Entry from './Entry'
import Detail from './Detail'

const mockList = [
    { title: "Subway"},
    { title: "Yokohama"},
    { title: "Tokyo Station"},
    { title: "Shibuya"},
    { title: "Shinjuku"},
]

const Entries = () => {

    return (
            mockList.map(list =>
                <Entry title={list.title} />
                )
            )

}

export default Entries

as soon as I changed Entries to 

const Entries = () => {

    return (
            mockList.map(list =>
                <Entry title={list.title} />
                )
            <Detail />
            )

}

The error will pop up.

Any suggestion on how to fix this problem? It's been frustrating not to be able to continue with this unexpected error.

I'm writing functional component as a practice to use React Hooks down the road in this app.

Upvotes: 1

Views: 3040

Answers (2)

Ashish Agarwal
Ashish Agarwal

Reputation: 31

In the second code you gave:

const Entries = () => {

    return (
            mockList.map(list =>
                <Entry title={list.title} />
                )
            <Detail />
            )

}

You didn't had a root container for the component. As Thiago already said, that is the answer. For those who get in the issue, I gotta also say that you need to surround the map's javascript code already with a <> or any something container

It will, and did to me, occured error "unexpected token" for the dot of array**.**map , so just this may also fix another issue.

Upvotes: 1

Thiago Loddi
Thiago Loddi

Reputation: 2340

You can only return one top level tag in the component. Also the javascript part has to be between {}

const Entries = () => {
  return (
    <>
      {mockList.map(list => <Entry title={list.title} />)}
      <Detail />
    </>
  );
};

Upvotes: 1

Related Questions