18

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;
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. Oct 25, 2018 at 22:36
  • @ChrisCovert check my updated question.
    – null
    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 Oct 25, 2018 at 22:51
  • Thats the point. syntax is correct but still this same error.
    – null
    Oct 26, 2018 at 15:07

6 Answers 6

18

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')}
      </>
    )
  }
}
6
  • 1
    wrapping that up is the same error. Nothing changed.
    – null
    Oct 25, 2018 at 22:36
  • It's valid js: babeljs.io/en/…
    – maxm
    Oct 25, 2018 at 22:38
  • Maybe you don't have JSX/babel/webpack/ installed?
    – maxm
    Oct 25, 2018 at 22:38
  • I created app using create-react-app which has everything.
    – null
    Oct 25, 2018 at 22:39
  • You might want to paste more code. Everything you've provided so far looks valid.
    – maxm
    Oct 25, 2018 at 22:41
2

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>
1
0

@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>
0

@null use a callback that returns console.log.

Asin

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

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

0

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;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.