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 ment class and ponent for viewing purposes. Also I removed the ment form ponent.

Here is main.js:

class App extends React.Component {
    constructor(props) {
        super(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.state = { ments : [] }
    }
    handleSubmit(event) {
        // ...
    }
    render() {
        const ments = this.statements.map((ment) => {
            <Comment author={ment.author} message={ment.message} />
        });
        const formment = <CommentForm handleSubmit = {this.handleSubmit} />;
        return (
            {ments}
            {formment} // ERROR HERE
        )
    }
}

ReactDOM.render(<App />, document.getElementById("root"))

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 ment class and ponent for viewing purposes. Also I removed the ment form ponent.

Here is main.js:

class App extends React.Component {
    constructor(props) {
        super(this);
        this.handleSubmit = this.handleSubmit.bind(this);
        this.state = { ments : [] }
    }
    handleSubmit(event) {
        // ...
    }
    render() {
        const ments = this.state.ments.map((ment) => {
            <Comment author={ment.author} message={ment.message} />
        });
        const formment = <CommentForm handleSubmit = {this.handleSubmit} />;
        return (
            {ments}
            {formment} // ERROR HERE
        )
    }
}

ReactDOM.render(<App />, document.getElementById("root"))

• javascript
• reactjs

Share Follow edited Jul 8, 2019 at 17:21 Emile Bergeron 17.4k55 gold badges8585 silver badges131131 bronze badges asked Jul 8, 2019 at 17:01 MaisyDoge13MaisyDoge13 15411 gold badge44 silver badges1414 bronze badges 0

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

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>
    {ments}
    {formment}
  </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 [ments, formment];
}

Reference.

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.

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

The other answers are also correct, but I encountered an additional case where this error occurs as well.

interface Props {
    className?: string
    background: BackgroundStyle
    children: React.ReactNode
    style?: any // Pass-through the style property to the root element
}

export default (props:Props) => {
    return (
        <div 
          className={cx('BackgroundStyle', getBackgroundStyleClassName(props.background), props.className)}
          style={...props.style}
        >
          {getBackgroundStyleInner(props.background)}
          {props.children}
        </div>
    )
}

The above ponent results in the same error when a style prop is passed in: unexpected token, expected "," in the render return function. The issue in this case is that the props.style pass-through is incorrect. The line should be: style={props.style} with no destructuring.