Adjacent JSX elements must be wrapped in enclosing tag

Question

I have been trying to port an html website to Gatsbyjs and React. When building the header compartement I get an error "Adjacent JSX elements must be wrapped in an enclosing tag" error at the line with the . I couldn't figure out the problem, and kindly ask for help. The reason that I am building it with stateful component is that I will add some extra functionality to it later on.

This is my code:

import React, {Component} from 'react'
import { Link } from 'gatsby'
import { graphql } from 'gatsby'
import Img from 'gatsby-image'
import get from 'lodash/get'
import PropTypes from 'prop-types'
import Image from 'components/image'





class Header extends React.Component {

        constructor(props) {
        super(props);

        this.state = {
          windowWidth: 1081,
          mobileNavVisible: false
        };
        }





  renderNavigation() {
            <div className="site-logo retina pull-left"><Link to="/"><Img file="ChefsChoiceLogo300x300_DarkBG.png" width="120px" alt="Chef's Choice Logo" draggable="true"/></Link></div>
            //Site Navigation-->
            <nav className="navbar pull-right">
              <div className="navbar-header">
                <button type="button" data-toggle="collapse" data-target=".site-navigation" className="navbar-toggle"><span className="sr-only">Gezinti Bölmesini Aç/Kapa</span><span className="fa fa-bars"></span></button>
              </div>

              <ul className="site-navigation">
                <li className="active"><Link to="/">Anasayfa</Link>

                </li>
                <li><Link to="menu" >Menü</Link>

                </li>
                <li><Link to="contact">İletişim</Link></li>
              </ul>
            </nav>
    }


  render() {
  return(
      <div className="menu-style-2 responsive sticky-menu">
        <div className="site-wrapper">
          <header className="site-header">   
            <div className="container">
              <div className="row">
              {this.renderNavigation()}
              </div>
            </div>
          </header>
        </div>
     </div>   
  )
}
}

export default Header

Answer 1

First of all, renderNavigation() doesn't seem to return anything.

Second, you are returning (?) a div and a nav side by side. These need to be wrapped in a container. You can only return one element.

renderNavigation() {
  return ( <-- add this
    <div className="wrapper"> <-- add this
      <div className="site-logo retina pull-left"><Link to="/"><Img file="ChefsChoiceLogo300x300_DarkBG.png" width="120px" alt="Chef's Choice Logo" draggable="true"/></Link></div>
      //Site Navigation-->
      <nav className="navbar pull-right">
        <div className="navbar-header">
          <button type="button" data-toggle="collapse" data-target=".site-navigation" className="navbar-toggle"><span className="sr-only">Gezinti Bölmesini Aç/Kapa</span><span className="fa fa-bars"></span></button>
        </div>

        <ul className="site-navigation">
          <li className="active"><Link to="/">Anasayfa</Link>

          </li>
          <li><Link to="menu" >Menü</Link>

          </li>
          <li><Link to="contact">İletişim</Link></li>
        </ul>
      </nav>
    </div> <-- add this
  ); <-- add this
}

Answer 2

I see two issues.

1) You need to do what it says and wrap your renderNavigation jsx with only one root element...

2) You need a return statement there as well...

  renderNavigation() {
    return (
      <React.Fragment>
        <div className="site-logo retina pull-left"><Link to="/"><Img file="ChefsChoiceLogo300x300_DarkBG.png" width="120px" alt="Chef's Choice Logo" draggable="true" /></Link></div>
        //Site Navigation-->
        <nav className="navbar pull-right">
          <div className="navbar-header">
            <button type="button" data-toggle="collapse" data-target=".site-navigation" className="navbar-toggle"><span className="sr-only">Gezinti Bölmesini Aç/Kapa</span><span className="fa fa-bars"></span></button>
          </div>

          <ul className="site-navigation">
            <li className="active"><Link to="/">Anasayfa</Link>

            </li>
            <li><Link to="menu" >Menü</Link>

            </li>
            <li><Link to="contact">İletişim</Link></li>
          </ul>
        </nav>
        <React.Fragment>
    )}

Answer 3

In the renderNavigation wrap everything inside divs and return as you have it in the render function.

 renderNavigation() {
  return(
        <div>
        <div className="site-logo retina pull-left"><Link to="/"><Img file="ChefsChoiceLogo300x300_DarkBG.png" width="120px" alt="Chef's Choice Logo" draggable="true"/></Link></div>
        //Site Navigation-->
        <nav className="navbar pull-right">
          <div className="navbar-header">
            <button type="button" data-toggle="collapse" data-target=".site-navigation" className="navbar-toggle"><span className="sr-only">Gezinti Bölmesini Aç/Kapa</span><span className="fa fa-bars"></span></button>
          </div>

          <ul className="site-navigation">
            <li className="active"><Link to="/">Anasayfa</Link>

            </li>
            <li><Link to="menu" >Menü</Link>

            </li>
            <li><Link to="contact">İletişim</Link></li>
          </ul>
        </nav>
       </div>
)
}