React-Bootstrap unable to align navlinks inline

Question

I was trying to create navbar but the nav links appear like points and are not inline. When I try the example given in react-bootstrap documentation it is inline.

Here is code for my header component. When the user clicks login and he is logged in then the header component gets user object as props and I want to add name and logout links.

import React from 'react';
import { Navbar, Nav } from 'react-bootstrap';
// NavDropdown, Form, FormControl, Button

var header = props => {
  let { user, loginClick, logoutClick } = props;
  let { name } = user;
  var navLinks =
    typeof name == 'undefined' || name === '' ? (
      <Nav.Link onClick={loginClick}>Login</Nav.Link>
    ) : (
      <div>
        <Navbar.Text> {name} </Navbar.Text>
        <Nav.Link onClick={logoutClick}>Log out</Nav.Link>
      </div>
    );

  // Here Items are not comming Inline
  return (
    <Navbar bg='light' expand='sm'>
      <Navbar.Brand href='#home'>Friends And Pets</Navbar.Brand>
      <Navbar.Toggle aria-controls='basic-navbar-nav' />
      <Navbar.Collapse id='basic-navbar-nav'>
        <Nav className='ml-auto'>{navLinks}</Nav>
      </Navbar.Collapse>
    </Navbar>
  );

  // Comes inLine

  // return (
  //     <Navbar bg="light" expand="lg">
  //         <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
  //         <Navbar.Toggle aria-controls="basic-navbar-nav" />
  //         <Navbar.Collapse id="basic-navbar-nav">
  //             <Nav className="ml-auto">
  //                 <Nav.Link href="#home">Home</Nav.Link>
  //                 <Nav.Link href="#link">Link</Nav.Link>
  //                 <NavDropdown title="Dropdown" id="basic-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>
  //             <Form inline>
  //                 <FormControl type="text" placeholder="Search" className="mr-sm-2" />
  //                 <Button variant="outline-success">Search</Button>
  //             </Form>
  //         </Navbar.Collapse>
  //     </Navbar>
  // )
};
export default header;

Note: I can use additional CSS to make it inline but i am trying to do this in using react-bootstrap

How to fix this thanks any help is appreciated.

Answer 1

That extra div is likely causing the formatting issue. Try replacing the div with a React Fragment.

FYI - I modified your logic slightly to include a minimal, reproducible example. Other minor changes include:

• Importing individual components from react-bootstrap
• Replacing var with ES6's const

    import React, { Fragment } from 'react';
    import Nav from 'react-bootstrap/Nav';
    import Navbar from 'react-bootstrap/Navbar';

    const header = props => {
      const isLoggedIn = true;

      // Here Items are not coming Inline
      return (
        <Navbar bg='light' expand='sm'>
          <Navbar.Brand href='#home'>Friends And Pets</Navbar.Brand>
          <Navbar.Toggle aria-controls='basic-navbar-nav' />
          <Navbar.Collapse id='basic-navbar-nav'>
            <Nav className='ml-auto'>
              {isLoggedIn ? (
                <Fragment>
                  <Navbar.Text> Fake Name</Navbar.Text>
                  <Nav.Link>Log out</Nav.Link>
                </Fragment>
              ) : (
                <Nav.Link>Login</Nav.Link>
              )}
            </Nav>
          </Navbar.Collapse>
        </Navbar>
      );
    };
    export default header;