Adjacent JSX error during compiling in reactjs

Question

return (

  <Router>
    <div className="banner" >
  <div >
    <ul>
       <li><Link className="a" to={'/'}>•Home</Link></li>
       <li><Link className="a" to={'/about'}>•About</Link></li>     
       <li><Link className="a" to={'/LoginForm'}>•Login</Link></li>
       <li><Link className="a" to={'/gallery'}>•Gallery</Link></li>
       <li><Link className="a"to={'/services'}>•Services</Link></li>
       <li><Link className="a"to={'/contact'}>•Contact</Link></li>
     </ul>
    </div>
      <hr/>

      <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/LoginForm" component={LoginForm}/>
      <Route path="/gallery" component={Gallery}/>
      <Route path="/services" component={Services}/>
      <Route path="/contact" component={Contact}/>
      </Switch>
    </div>

  </Router>

  <div className="w3-content w3-display-container">
  <img className="mySlides" src={image1.jpg} style="width:100%">
  <img className="mySlides" src={image2.jpg} style="width:100%">
  <img className="mySlides" src={image3.jpg} style="width:100%">
  <img className="mySlides" src={image4.jpg} style="width:100%">
  <img className="mySlides" src={image5.jpg} style="width:100%">
  <img className="mySlides" src={image6.jpg} style="width:100%">
  </div>


    );

This my code..But Syntax error: E:/Projects/react-redux-login/src/components/HomePage/HomePage.js: Adjacent JSX elements must be wrapped in an enclosing tag (42:6)error occurs.. What change I need to make? Error occurs between router tag close and div..

Possible duplicate of [Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag](https://stackoverflow.com/questions/31284169/parse-error-adjacent-jsx-elements-must-be-wrapped-in-an-enclosing-tag) — pmonty, Apr 20 '18 at 05:11

score 2 · Accepted Answer · answered Apr 20 '18 at 05:10

You need to wrap your code into a single parent container. You can do that as following:

return (
 <div>
  <Router>
   <div className="banner" >
    <div >
     <ul>
      <li><Link className="a" to={'/'}>•Home</Link></li>
      <li><Link className="a" to={'/about'}>•About</Link></li>     
      <li><Link className="a" to={'/LoginForm'}>•Login</Link></li>
      <li><Link className="a" to={'/gallery'}>•Gallery</Link></li>
      <li><Link className="a"to={'/services'}>•Services</Link></li>
      <li><Link className="a"to={'/contact'}>•Contact</Link></li>
     </ul>
    </div>
    <hr/>

    <Switch>
     <Route exact path="/" component={Home} />
     <Route path="/about" component={About} />
     <Route path="/LoginForm" component={LoginForm}/>
     <Route path="/gallery" component={Gallery}/>
     <Route path="/services" component={Services}/>
     <Route path="/contact" component={Contact}/>
    </Switch>
  </div>
 </Router>

 <div className="w3-content w3-display-container">
  <img className="mySlides" src={image1.jpg} style="width:100%">
  <img className="mySlides" src={image2.jpg} style="width:100%">
  <img className="mySlides" src={image3.jpg} style="width:100%">
  <img className="mySlides" src={image4.jpg} style="width:100%">
  <img className="mySlides" src={image5.jpg} style="width:100%">
  <img className="mySlides" src={image6.jpg} style="width:100%">
  </div>
 </div>
)

If you're using React 16.x, you can use `React.Fragment` or `<>` - that way you don't change the DOM output. — Tyler Sebastian, Apr 20 '18 at 05:21

Adjacent JSX error during compiling in reactjs

1 Answers1