Syntax error when I use ternary conditional expression in JSX-syntax (React)

Question

I'm getting an error for the following code:

{this.props.mountedPage === "frontpage" ?
            <Navbar className="navbar-nomargin"> :
            <Navbar>}

Error message: Error - Parsing error: Unexpected token .
Refers to the first dot in this.props.mountedPage

I have something similar a few lines down and it's working fine without any lint errors:

{this.props.mountedPage === "frontpage" ?
                    <NavItem href="/#services">Tjänster</NavItem>
                    : null}

EDIT:
Thanks for the suggestions, you were right, the linter failed to close the tag properly. I ended up moving the rendering of elements to a separate function so that the tag would close properly:

render: function() {
    return (
        this.props.mountedPage == "frontpage" ?
        <Navbar className="navbar-nomargin">{this.renderBody()}</Navbar> :
        <Navbar>{this.renderBody()}</Navbar>
    );
}

jmancherje · Accepted Answer · 2017-05-11 22:09:03Z

The syntax error is an error with your JSX. All JSX tags have to be manually closed so change your navbar tags.

<navbar> // this will throw a syntax error in JSX

these will not:

<navbar />

OR

<navbar></navbar>

EDIT: Conditionally rendering a whole different component in this case is not the ideal solution because the only difference is a className. You can do this to just conditionally change the className:

<navbar className={ this.props.mountedPage === 'frontpage' ? 'navbar-nomargin' : '' } />

Or you can use this npm package classnames which I find to be extremely useful in any React application because this is such a common thing to do.

import classNames from 'classnames'

...
<navbar className={ classNames('navbar', {
    'navbar-nomargin': mountedPage === 'frontPage'
}) } />

It is very useful because you can list any class names you want (like the 'navbar' class I added) and you can also include an object to handle all your conditional classes with this structure:

{
    desiredClassName: boolean,
    anotherPossibleClass: boolean,
}

This allows you to put the conditional as the value of the object and the className as the key. true will result in the className including the key.

Rob Brander · Accepted Answer · 2016-05-18 14:01:21Z

2

You are missing closing tags on your NavBar. NavItem has a closing tag, so it works.

{this.props.mountedPage === "frontpage" ?
        <Navbar className="navbar-nomargin" /> :
        <Navbar /> }

answered May 18, 2016 at 14:01

Rob Brander

3,7811 gold badge22 silver badges33 bronze badges

Comments

anoop · Accepted Answer · 2016-05-18 13:57:22Z

There are two ways you can achieve this

Option 1:

class MyComponent extends React.Component {
  render() {
    return (      
      this.props.mountedPage === "frontpage" ?
      <h1>asdad</h1> :
      <h1/>
    );
  }
}

React.render(
  <MyComponent mountedPage="frontpage" name="Joe Schmoe"/>,
  document.getElementById('react_example')
);

Option 2:

class MyComponent extends React.Component {
  render() {
    return (
      <div>
      {
        this.props.mountedPage === "frontpage" ?
        <h1>asdad</h1>:
        <h1/>
      }
      </div>
    );
  }
}

React.render(
  <MyComponent mountedPage="frontpage" name="Joe Schmoe"/>,
  document.getElementById('react_example')
);

And also remember to close the HTMLtags properly. Hope this helps

Collectives™ on Stack Overflow

Syntax error when I use ternary conditional expression in JSX-syntax (React)

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related