CODEWITHSUNDEEP
javascriptnode.jsreactjs
Janith Widarshana
Janith Widarshana

Reputation: 3483

React js if else condition

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/components/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/components/Tab/index.js 7:11-27

Upvotes: 0

Views: 3655

Answers (3)

Sagi_Avinash_Varma
Sagi_Avinash_Varma

Reputation: 1509

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>;
    );

Upvotes: 2

Carl Edwards
Carl Edwards

Reputation: 14474

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>

Upvotes: 3

g2jose
g2jose

Reputation: 1465

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.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions for more info on using arrow functions.

Upvotes: 1

Related Questions