Next.js - using another <div></div> throws error, why?

Viewed 3276

Bear with me, I am just starting to explore Next.js ... I couldnt find any info on this error I got from using the html tag two times. It works with just one container, but as soon as I add another one, I get this:

Error: error: Unexpected token "div". Expected jsx identifier

1 Answers

This is because you are trying to pass 2 children but Next.js only expects one. I believe you are doing something like this:

return (
    <div>div 1</div>
    <div>another div</div>
)

Instead you need to wrap both of these with another tag:

return (
<>
    <div>div 1</div>
    <div>another div</div>
</>
)
Related