React Parent Component Not Rendering Child Component - reactjs

Question

Basic question, but we all start somewhere.
I have a parent Nav.js
import React, { Component } from 'react'
import navLink from './navLink'
class Nav extends Component {
render () {
return (
<div>
<nav className="bb bt b--black-20 tc center bg-white">
<navLink />
</nav>
</div>
)
}
}
Nav.displayName = 'Nav'
export default Nav
Here's the file that won't get displayed:
navLink.js:
import React from 'react'
import Link from 'next/link'
const navigationLinks = [
{ name: '1', link: '/', router: true },
{ name: '2', link: '#' }
]
const renderLink = (link, i) => {
if (link.router === true) {
return (
<Link href={link.link}>
<a className="yellow" key={i}>{link.name}</a>
</Link>
)
} else {
return (
<a className="red" key={i} target="_blank" rel="noopener noreferrer" href={link.link}>{link.name}</a>
)
}
}
const navLink = () => (
<nav className="container">
{navigationLinks.map(link => renderLink(link))}
</nav>
)
navLink.displayName = 'navLink'
export default navLink
I'm my problem is super basic, but I have no idea how to resolve this. Thanks for your time!

Answer 1

The main problem is navLink with a small letter, it should be NavLink as RenderLink if you want to use it.
In JSX lower case are considered to be a HTML tags, HTML is not have no a navLink tag so it's just didn't displayed.

Answer 2

User-Defined Components Must Be Capitalized
The first part of a JSX tag determines the type of the React element.
Capitalized types indicate that the JSX tag is referring to a React component. These tags get compiled into a direct reference to the named variable, so if you use the JSX expression, Foo must be in scope.
see: docs
Render links
const SimpleLink = ({link}) => (
<Link href={link.link}>
<a className="yellow">{link.name}</a>
</Link>
);
const RenderRouter = ({link}) => (
<a className="red" target="_blank" href={link.link}>{link.name}</a>
);
const renderLink = link => link.router ?
( <SimpleLink key={i} link={link}/> ) :
( <RenderRouter key={i} link={link}/> );
...
const NavLink = () => (
<div className="container">
{ navigationLinks.map((link, i) => renderLink(link, i))}
</div>
);
...
export default NavLink
Import
import NavLink from './navLink.js'
Nav Component
class Nav extends Component {
render () {
return (
<nav className="bb bt b--black-20 tc center bg-white">
<NavLink />
</nav>
)
}
}
See: working example
Fix proptypes
react-router may provide propType definitions for it already, but whether they do or not, you'd still need to explicitly connect them.
Rend.propTypes = {
link: React.PropTypes.shape({
link: React.PropTypes.string.isRequired
}),
};
See: eslint-plugin-react/issues/1109