Q:

How does one import a child component in react?

The component which is external includes and external file
  class NavigationBarContainer extends React.PureComponent {
 render = () => <NavigationBar extraBanner={<Banner 
   />} {...this.props} />

}
in my App
   import NavigationBar from '../components/NavigationBar'

    <NavigationBar
      extraBanner />

doesn't seem to work
  import NavigationBarContainer from '../components/NavigationBar'
     <NavigationBarContainer {...this.props}>

doesnt seem to work either getting error below
**Invalid prop extraBanner of type boolean supplied to NavigationBar, expected a single ReactElement.**

A:

Two possible things that are wrong here. 
1) NavigationBarContainer is not being exported, thus you cannot import it.
You can fix this by making sure to export the class one of two ways -- either change the class declaration to include the export keyword
export default class NavigationBarContainer extends React.PureComponent

or add a line to the bottom of that file
export default NavigationBarContainer;

2) You are trying to import a component called NavigationBarContainer from a file called NavigationBar. If that file is called NavigationBarContainer then this will not work. Make sure that your file names are correct.

A quick summary of export vs export default and importing
export default
The default export can be given any name when imported, eg.
// components/MyComponent.js
export default class MyComponent extends React.Component {...}

// AnotherFile.js
import MyComponent from 'components/MyComponent'; // works
import WhateverName from 'components/MyComponent'; // also works

export
When you don't use the default keyword, then you're making a named export. These have to be imported directly by name, using this syntax:
// components/SmallComponents.js
export class SmallComponent1 extends React.Component {...}
export class SmallComponent2 extends React.Component {...}

// AnotherFile.js
import {SmallComponent1, SmallComponent2} from 'components/SmallComponents'; // works
import SmallComponent1 from 'components/SmallComponents' // does not work
import {WhateverName} from 'components/SmallComponents' // does not work

Hope this helps!

