Infinity loop for React Bootstrap components

user_8726434 0
Viewed 205

I installed react-bootstrap 5.1.3 and the app functions normally, but when I copy and paste this component, the app enters an infinite loop. The terminal application runs fine, but the browser displays no errors. There are no additional components in my application.

React Version: 17.0.2

=> Navigation.js

import React from "react";
import { Container, Navbar, NavDropdown } from "react-bootstrap";

const Nav = () => {
  return (
    <Navbar collapseOnSelect expand="lg" bg="dark" variant="dark">
      <Container>
        <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
          <Nav className="me-auto">
            <Nav.Link href="#features">Features</Nav.Link>
            <Nav.Link href="#pricing">Pricing</Nav.Link>
            <NavDropdown title="Dropdown" id="collasible-nav-dropdown">
              <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
              <NavDropdown.Item href="#action/3.2">
                Another action
              </NavDropdown.Item>
              <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
              <NavDropdown.Divider />
              <NavDropdown.Item href="#action/3.4">
                Separated link
              </NavDropdown.Item>
            </NavDropdown>
          </Nav>
          <Nav>
            <Nav.Link href="#deets">More deets</Nav.Link>
            <Nav.Link eventKey={2} href="#memes">
              Dank memes
            </Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Container>
    </Navbar>
  );
};

export default Nav;

=> App.js

import 'bootstrap/dist/css/bootstrap.min.css';
import React from 'react';
import Nav from './components/Header/Nav';

function App() {
  return (
    <div>
      <Nav />
    </div>
  );
}

export default App;
react-bootstrap reactjs
1 Answers

The problem is related to the name of your Nav component. You are trying to render Nav of react-bootstrap inside your Nav component but you did not import it from react-bootstrap. As a result, Nav calls itself and causes an infinite loop.

You should import Nav from react-bootstrap the name of your Nav function and its export command like:

import { Nav, Container, Navbar, NavDropdown } from "react-bootstrap";

const Navivation = () => {

// ...
};
export default Navivation;

you can take a look at this sandbox for a live working example.

user_73994780
Related