javascript - Parsing error: Unexpected token, expected "," - Stack Overflow

admin管理员组

文章数量:1168588

I have below code in react js.

class Posts extends Component {
  render() {
    return (
      {console.log('test')}
    );
  }
}

After running this code I get error which is

Parsing error: Unexpected token, expected ","

   8 |     return (
>  9 |       {console.log('test')}
     |       ^
  10 |     );
  11 |   }
  12 | }

UPDATE

wrapping it up with parent tag returns the same error

>  9 |       <div>
     |       ^
  10 |         {console.log('nothing')}
  11 |       </div>

UPDATE

here is the whole class

import React, { Component } from 'react';
import { connect } from 'react-redux';

class Post extends Component {
  render() {
    return (
      <div>
        {console.log('test')}
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    posts: state
  }
};

export default Post;

I have below code in react js.

class Posts extends Component {
  render() {
    return (
      {console.log('test')}
    );
  }
}

After running this code I get error which is

Parsing error: Unexpected token, expected ","

   8 |     return (
>  9 |       {console.log('test')}
     |       ^
  10 |     );
  11 |   }
  12 | }

UPDATE

wrapping it up with parent tag returns the same error

>  9 |       <div>
     |       ^
  10 |         {console.log('nothing')}
  11 |       </div>

UPDATE

here is the whole class

import React, { Component } from 'react';
import { connect } from 'react-redux';

class Post extends Component {
  render() {
    return (
      <div>
        {console.log('test')}
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    posts: state
  }
};

export default Post;

• javascript
• reactjs

Share Improve this question Follow edited Oct 25, 2018 at 22:38 null asked Oct 25, 2018 at 22:31 nullnull 1,16233 gold badges1313 silver badges3030 bronze badges 4

• I think you're just missing a top level JSX tag. Trying using just the parens (drop the curly braces) or wrapping it in a div. – Chris Covert Commented Oct 25, 2018 at 22:36
• @ChrisCovert check my updated question. – null Commented Oct 25, 2018 at 22:38
• On babel's online transpiler, if I copy/paste your code then remove the '{' and '}' around console.log, the error disappears. Same as what @dacre-denny said. If that's not working for you, then we probably need more information – Chris Covert Commented Oct 25, 2018 at 22:51
• Thats the point. syntax is correct but still this same error. – null Commented Oct 26, 2018 at 15:07

Add a comment  | 

6 Answers 6

Sorted by: Reset to default 19

You always need to have a wrapping parent JSX tag when returning jsx. Since you don't have any jsx tags it's just invalid javascript. Should be:

class Posts extends Component {
  render() {
    return console.log('test')
  }
}

or if you want the jsx

class Posts extends Component {
  render() {
    return (
      <div>
        {console.log('test')}
      </div>
    )
  }
}

edit (2020-1-19)

jsx now supports empty tags for parent closures:

class Posts extends Component {
  render() {
    return (
      <>
        {console.log('test')}
      </>
    )
  }
}

in react js You have to put a value in the attr.

an example that works

<option selected={this.props.info.gender == 0 ? 'selected' : ''} value='0'>men</option>
<option selected={this.props.info.gender == 1 ? 'selected' : ''} value='1'>female</option>

not working

<option {this.props.info.gender == 0 ? 'selected' : ''} value='0'>men</option>
<option {this.props.info.gender == 1 ? 'selected' : ''} value='1'>female</option>

@Mehrdad Masoumi, have a big mistake, this true:

<option selected={this.props.info.gender == **1** ? 'selected' : ''} value='**1**'>men</option>
<option selected={this.props.info.gender == **0** ? 'selected' : ''} value='**0**'>female</option>

@null use a callback that returns console.log.

Asin

() => console.log('test')

mapStateToProps used by connect method of redux add console.log Before the return method

Ook let me explain something, if you are mapping your objects or anything and getting this parsing error then try to put your map code inside React Fragments (<>)

Look at the example

import React from "react";
import { useEffect } from "react";
import { CartContext } from "../context/Context";

const UserInterface = () => {
  const { loading, data } = CartContext();
  useEffect(() => {}, []);

  return (
    <>
      {!loading ? (
        data.map((e) => {
          return (
            <>
              <img
                src={e.imageUrl}
                style={{ width: "50px", height: "60px" }}
                alt="something wrong"
              />
              <h1>{e.colour}</h1>;
            </>
          );
        })
      ) : (
        <h1>Still Loading ....</h1>
      )}
    </>
  );
};

export default UserInterface;

本文标签： javascriptParsing error Unexpected tokenexpected quotquotStack Overflow