CODEWITHSUNDEEP
reactjs
Leon Bogod
Leon Bogod

Reputation: 428

expected corresponding jsx closing tag for <li>

Hi all im trying to make a navbar using nav link , howeveri am getting an error saying expected coresponding jsx clsoing tag for <li> I have tried to fix the error however i cant seem to understand why its not working , sorry if im asking a stupid question im just a begginer. 

import React, { Component } from 'react';
import logo from './logo.svg';

import Weather from "./Weather.js";
import Header from "./Header";
import Nav from "./Nav";
import About from "./About";
import Down from "./Down";
import Contact from "./Contact";
import Map from "./map/Map";
import Footer from "./Footer";
import Home from "./Home";

import Skycons from "react-skycons"
import { geticon } from "./geticon.js"

import ToggleDisplay from 'react-toggle-display';
import Form from "./Form.js";
import Layout from "./layout.js";
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';

import { FormControl, FormGroup, ControlLabel, HelpBlock, Checkbox, Radio, Button } from 'react-bootstrap';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";


          render() {
        return (
          <div>

            <Router>
     <Route exact path='/' component={Home}/>

    <Route exact path="/layout" render={() => <Layout getWeather={this.getWeather} parentState={this.state} />} />

    <div> 

         <nav className="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
          <div className="container">

            <a className="navbar-brand js-scroll-trigger" href="#page-top">Start Bootstrap</a>
            <button className="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">

              <i className="fa fa-bars"></i>
            </button>

            <div className="collapse navbar-collapse" id="navbarResponsive">
              <ul className="navbar-nav ml-auto">
                <li className="nav-item">
            <Navlink to="/" className="nav-link js-scroll-trigger" href="#about">Home</Navlink>
                </li>
                <li className="nav-item">
               <Navlink to="/layout" className="nav-link js-scroll-trigger"> Search </Navlink>
                <li className="nav-item">
                  <a className="nav-link js-scroll-trigger" href="#contact">Search</a>
                </li>
              </ul>
            </div>
          </div>
          </Router>
        </nav>


    </div>
    </div>
        );
      }
    };

    export default App;

Upvotes: 0

Views: 1193

Answers (2)

Shashwat Prakash
Shashwat Prakash

Reputation: 484

  1. I am not seeing any App class in the code which is shared by you.
  2. You are using Navlink but you didn't import anywhere. You must import NavLink class from the package "react-router-dom".

Upvotes: 0

Andy Ray
Andy Ray

Reputation: 32076

<li className="nav-item">
  <Navlink to="/layout" className="nav-link js-scroll-trigger"> Search </Navlink>

You don't have a closing </li> for this tag.

You should install an eslint plugin for your editor, which will highlight in red errors like this on the lines where the problem is.

Upvotes: 2

Related Questions