Default export error even after exporting the component in ReactJS

Question

I am trying to create a navigation bar using react-bootstrap by referring to their documentation .

I created a NavigationBar.js component file which I'll import.

import React from 'react';
import Navbar from 'react-bootstrap/Navbar';
import PropTypes from 'prop-types';

const NavigationBar = props => {
  const { link, brand } = props;
  return (
    <Navbar bg="light" sticky="top">
      <Navbar.brand href={link}>{brand}</Navbar.brand>
    </Navbar>
  );
};

NavigationBar.propTypes = {
  brand: PropTypes.string.isRequired,
  link: PropTypes.string.isRequired,
};

export default NavigationBar;

And my App.js (where I am importing the component):

import React from 'react';
import './App.css';

import NavigationBar from './components/NavigationBar';

function App() {
  return (
    <div>
      <NavigationBar brand="xyz" link="#home" />
    </div>
  );
}

export default App;

The code compiles fine but throws an error in the browser as follows:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `NavigationBar`.

What can be done to resolve this error?

Answer 1

I believe the error comes from this line

      <Navbar.brand href={link}>{brand}</Navbar.brand>

The names of the components in react have to start with capital letter. This means that the Navbar.brand should be Navbar.Brand