I am new to React js. I gave a syntax error in following code. Can anyone help me on this please.

import React, { PropTypes } from 'react';
import uncontrollable from 'uncontrollable';
import CSSModules from 'react-css-modules';
import cn from 'classnames';
import styles from './Tab.scss';

export const Tab = ({title, isActive, children}) => (
    if(isActive){
        <div styleName='tab active' >{title}</div>
    }else{
        <div styleName='tab ' >{title}</div>
    }
);

Tab.propTypes = {
    isActive: PropTypes.bool,
    children: PropTypes.any,
    title: PropTypes.any,
};

export default uncontrollable(CSSModules(Tab, styles, {allowMultiple: true}), {

});

Following is the error.

ERROR in ./src/ponents/Tab/Tab.jsx Module build failed: SyntaxError: Unexpected token (10:4)

  8 | 
   9 | export const Tab = ({title, isActive, children}) => (
> 10 |     if(isActive){
     |     ^
  11 |         <div styleName='tab active' >{title}</div>
  12 |     }else{
  13 |         <div styleName='tab ' >{title}</div>

@ ./src/ponents/Tab/index.js 7:11-27

I am new to React js. I gave a syntax error in following code. Can anyone help me on this please.

import React, { PropTypes } from 'react';
import uncontrollable from 'uncontrollable';
import CSSModules from 'react-css-modules';
import cn from 'classnames';
import styles from './Tab.scss';

export const Tab = ({title, isActive, children}) => (
    if(isActive){
        <div styleName='tab active' >{title}</div>
    }else{
        <div styleName='tab ' >{title}</div>
    }
);

Tab.propTypes = {
    isActive: PropTypes.bool,
    children: PropTypes.any,
    title: PropTypes.any,
};

export default uncontrollable(CSSModules(Tab, styles, {allowMultiple: true}), {

});

Following is the error.

ERROR in ./src/ponents/Tab/Tab.jsx Module build failed: SyntaxError: Unexpected token (10:4)

  8 | 
   9 | export const Tab = ({title, isActive, children}) => (
> 10 |     if(isActive){
     |     ^
  11 |         <div styleName='tab active' >{title}</div>
  12 |     }else{
  13 |         <div styleName='tab ' >{title}</div>

@ ./src/ponents/Tab/index.js 7:11-27

• javascript
• node.js
• reactjs

3 Answers 3

As to why this doesn't work, I'll defer to the explanation given by @user1200514 but in short, code blocks aren't allowed in ES6's shorthand arrow function declarations.

Given how simple your conditional is I'd just use a ternary operator and place it directly inside your styleName declaration as so:

<div styleName={isActive ? 'tab active' : 'tab'}>{title}</div>

First let me point out the mistake

JSX allows any javascript expressions. The mistake in your code is that u have mistake in the arrow function. arrow function syntax allows two syntaxes

in ur code since if else is a code block and not an expression you should either go with

1. Shorthand

   const fn = ({title, isActive, children}) => (
     <div styleName={isActive ? 'tab active' : 'tab'}>{title}</div>
   );
   

2. Regular

   const fn = ({title, isActive, children}) => {
     if (isActive) {
       return <div styleName='tab active' >{title}</div>;
     } else {
       return <div styleName='tab' >{title}</div>;
     }
   }
   

Coming to best way to go about it

To handle conditional classes use classnames library. u can make your code very readable. its even got a mention in react docs

React.addons.classSet is now deprecated. This functionality can be replaced with several freely available modules. classnames is one such module.

    import cn from 'classnames';

    const fn = ({title, isActive, children}) => (
      <div styleName={cn('tab', { 'active': isActive })}>{title}</div>;
    );

In ES2015, writing something like

const fn = (arg1, arg2) => (
  'abc';
);

is the same as

const fn = (arg1, arg2) => {
  return 'abc';
};

Basically, you're trying to add an if inside a return statement.

Change it as follows and it should work:

export const Tab = ({title, isActive, children}) => {
  if(isActive){
    return (<div styleName='tab active' >{title}</div>);
  } else {
    return (<div styleName='tab ' >{title}</div>);
  }
};

Have a look at https://developer.mozilla/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions for more info on using arrow functions.