I'm seeking assistance in resolving an issue I'm facing. Despite attempting to tackle the import functions, I continue to encounter an error. Removing "{}" also proved unsuccessful. Any help would be greatly appreciated. Currently enrolled in TylerMcginnis React-Redux course. Navigation.js
import React from 'react'
import PropTypes from 'prop-types'
import Link from 'react-router-dom'
import { container, navContainer, link } from './styles.css'
Navigation.propTypes = ActionLinks.propTypes = NavLinks.propTypes = {
isAuthed: PropTypes.bool.isRequired,
}
function NavLinks ({isAuthed}) {
return (isAuthed === true
? <ul>
<li><Link to='/' className={link}>{'Home'}</Link></li>
</ul>
: <noscript />)
}
function ActionLinks ({isAuthed}) {
return (isAuthed === true
? <ul>
<li>NEW DUCK</li>
<li><Link to='/logout' className={link}>{'Logout'}</Link></li>
</ul>
: <ul>
<li><Link to='/' className={link}>{'Home'}</Link></li>
<li><Link to='/auth' className={link}>{'Authenticate'}</Link></li>
</ul>)
}
export default function Navigation ({isAuthed}) {
return (
<div className={container}>
<nav className={navContainer}>
<NavLinks isAuthed={isAuthed} />
<ActionLinks isAuthed={isAuthed} />
</nav>
</div>
)
}
MainContainer.js
import React from 'react'
import Navigation from '../../components/Navigation/Navigation'
import {container, innerContainer} from './styles.css'
import createReactClass from 'create-react-class'
const MainContainer = createReactClass({
render () {
return (
<div className={container}>
<Navigation isAuthed={true} />
<div className={innerContainer}>
{this.props.children}
</div>
</div>
)
},
})
export default MainContainer
Error Message: Uncaught 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. at invariant (invariant.js:42)