Unexpected Token, Expected "," Inside Of React Render() Function In The Return Statement

The error is unexpected token, expected ',' in the render return function. I am using babel and linking this file in an html file. I removed the comment class and component for vie

Solution 1:

The problem occurs, because JSX requires you to only have one root element. In your case you're having two root elements.

If you want to return multiple elements, you need to wrap them into some sort of container, most of the time a simple div will be sufficient:

return (
  <div>
    {comments}
    {formcomment}
  </div>
);

If the div is disrupting your styling, you might want to use a Fragment instead.

Read more about JSX in general here and here.

EDIT:

As Emile Bergeron pointed out, you can also return an array as of React 16.2:

render() {
  return [comments, formcomment];
}

Reference.

Solution 2:

The problem is that you are trying to render multiple elements without a parent container.

You should be able to fix this by adding <Fragment> ... </Fragment> (or, more simply, <> ... </>) around the contents of your return statement. This will give the JSX transpiler a single element to render with.

The usual fix for this is using a "wrapper div", but using a Fragment like this is the new way of wrapping elements without adding nodes to the DOM.

Checkout out this page to learn more about this problem and React fragments.

Solution 3:

Have you tried wrapping your return value in a div or fragment(<></>)?