Question: This is the error I am facing: 

```
djacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>?

```

I am trying to implement only the admin can see menu 2 and menu 3 so write the code this way:

```
          <a>menu 1</a>
          {(this.props.person.ADMIN) ?
            <a>Menu 2</a>
            <a>Menu 3</a>
            :

            ''
          }

```

When I write this way removing another anchor tag:

```
  <a>menu 1</a>
  {(this.props.person.ADMIN) ?
    <a>Menu 2</a>
    :

    ''
  }

```

It works. What's wrong with this if I use two item in the condition? How can I use more than one item inside this block?

Answer: 
Use fragment to wrap the two component. You are returning two elements simultaneously which causes that error.

```
<a>menu 1</a>
 {(this.props.person.ADMIN) 

   ? <>
       <a>Menu 2</a>
       <a>Menu 3</a>
     </>

   :

     ''
  }

```

You can also return an array instead of wrapping the component in one tag.

```
<a>menu 1</a>
 {(this.props.person.ADMIN) 

   ? [
       <a>Menu 2</a>
       <a>Menu 3</a>
     ]

   :

     ''
  }

```
The error message is pretty clear. The solution is just using a `React.Fragment` like so:

```
<a>menu 1</a>
  {(this.props.person.ADMIN) ?
    <>
        <a>Menu 2</a>
        <a>Menu 3 </>
    </>
     :
    ''
  }

```