I'm trying to return two links if the user is not logged in. Something like this:

<Nav>
    {if(this.state.user) {
        <NavItem onClick={this.logout}>Log out</NavItem>
    } else {
        <NavItem onClick={this.login}>Log in</NavItem>
        <NavItem onClick={this.register}>Register</NavItem>
    }
    }
</Nav>

I know I can do this with a ternary operator:

<Nav>
    {this.state.user ?
        <NavItem onClick={this.logout}>Log out</NavItem>
        :
        <NavItem onClick={this.login}>Log in</NavItem>
    }
</Nav>

The problem is I want to render the two NavItems. I saw I can do it with a function, but when I try to do it in a function like this:

myFunction(){
    return(
        <NavItem onClick={this.login}>Zaloguj się</NavItem>
        <NavItem onClick={this.login}>Zaloguj się</NavItem>
    )
}

It tells me that the second element is unreachable and breaks. So how can I return two elements? Stringifying the code doesn't help

I'm trying to return two links if the user is not logged in. Something like this:

<Nav>
    {if(this.state.user) {
        <NavItem onClick={this.logout}>Log out</NavItem>
    } else {
        <NavItem onClick={this.login}>Log in</NavItem>
        <NavItem onClick={this.register}>Register</NavItem>
    }
    }
</Nav>

I know I can do this with a ternary operator:

<Nav>
    {this.state.user ?
        <NavItem onClick={this.logout}>Log out</NavItem>
        :
        <NavItem onClick={this.login}>Log in</NavItem>
    }
</Nav>

The problem is I want to render the two NavItems. I saw I can do it with a function, but when I try to do it in a function like this:

myFunction(){
    return(
        <NavItem onClick={this.login}>Zaloguj się</NavItem>
        <NavItem onClick={this.login}>Zaloguj się</NavItem>
    )
}

It tells me that the second element is unreachable and breaks. So how can I return two elements? Stringifying the code doesn't help

• javascript
• reactjs
• jsx

• 1 jsx expects a wrapper element or an array. So either try putting them in array...[<NavItem .../>, <NavItem.../>] or with a wrapper. <div><NavItem .../><NavItem.../></div> – Ronn Wilder Commented May 28, 2018 at 11:37
• 1 You want React.Fragment – Arman Charan Commented May 28, 2018 at 11:38

4 Answers 4

If you are using React v16.2.0 and above you can use the shorter version of Fragments

<>
 <NavItem onClick={this.login}>Zaloguj się</NavItem>
 <NavItem onClick={this.login}>Zaloguj się</NavItem>
</>

If you are using a version below React v16 you can only return one element in jsx, so you have to wrap your elements inside one:

<div>
 <NavItem onClick={this.login}>Zaloguj się</NavItem>
 <NavItem onClick={this.login}>Zaloguj się</NavItem>
</div>

If you are using React v16 and abose you can use Fragments

import React, { Fragment } from 'react';

...
...

    <Fragment>
     <NavItem onClick={this.login}>Zaloguj się</NavItem>
     <NavItem onClick={this.login}>Zaloguj się</NavItem>
    <Fragment/>

You could also return an Array of Elements as announced here:

 return [
    <NavItem key="1" onClick={this.login}>Zaloguj się</NavItem>,
    <NavItem key="2" onClick={this.login}>Zaloguj się</NavItem>
  ];

Depending on your environment you might not be able to use all of these solutions: support for fragments

In the lastest react version you can wrap them in an empty fragment:

<>
  <NavItem onClick={this.login}>Zaloguj się</NavItem>
  <NavItem onClick={this.login}>Zaloguj się</NavItem>
</>

You need to wrap it around something, like <div> or <React.Fragment> (v16):

<React.Fragment>
  <NavItem onClick={this.login}>Log in</NavItem>
  <NavItem onClick={this.register}>Register</NavItem>
</React.Fragment>

You must use the ternary operators instead of if statements to directly render the elements in JSX.

You can use Fragment in ReactJS which is available in React 16.

which lets you group a list of children without adding extra nodes to the DOM.

You can import fragment like below ,

import React, {Fragment} from 'react';

  To render:


  <Fragment>
   <ChildA />
   <ChildB />
   <ChildC />
 </Fragment>

By using Fragment, you can avoid extra html element such div being rendered.

For more info, you can refer https://reactjs/docs/fragments.html