JSX error: Unexpected Token, expected ","

Question

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.

Thiago Loddi · Accepted Answer · 2019-09-03 00:38:59Z

1

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 />
    </>
  );
};

answered Sep 3, 2019 at 0:38

Thiago Loddi

2,3705 gold badges23 silver badges36 bronze badges

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

1 Comment

DatCra Over a year ago

I was just about to post similar solution. Finally figured out the javascript has to be between {}. Learned a valuable lesson.

Ashish Agarwal · Accepted Answer · 2024-04-26 11:04:59Z

1

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.

answered Apr 26, 2024 at 11:04

Ashish Agarwal

294 bronze badges

Collectives™ on Stack Overflow

JSX error: Unexpected Token, expected ","

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related