Reactjs unseen components

Question

This is my main page :

import React, {Component} from 'react';
import navBar from './navigationBar';

class Main extends Component {
    render() {
        return (
            <div className="container">
                <navBar/>
            </div>
        );
    }
}
export default Main;

And here is navBar component

import React from 'react';
import {Route, Link} from 'react-router-dom'
import Error from './Error'

class navigationBar extends React.Component  {
    render() {
        return (
            <div className="nav">
                <nav className="navbar navbar-inverse bg-inverse">
                    <ul className="nav navbar-nav">
                        <li className="nav-item">
                            <Link to={"/data"} className="nav-link"> Data </Link>
                        </li>
                        <li className="nav-item">
                            <Link to={"/analysis"} className="nav-link"> Analysis </Link>
                        </li>
                        <li className="nav-item">
                            <Link to={"/Monitor"} className="nav-link"> Monitor </Link>
                        </li>
                    </ul>
                </nav>
                <Route path={"/webiks/:user"} component={Error}/>
            </div>
        );
    }
}

export default navigationBar;

For some reason I cant see the navigationBar components. is this problem related to the code or to the configurations?

Thank you.

[User-Defined Components Must Be Capitalized](https://facebook.github.io/react/docs/jsx-in-depth.html#user-defined-components-must-be-capitalized) — CD.., Aug 15 '17 at 11:15

score 2 · Answer 1 · answered Aug 15 '17 at 11:14

2

navigationBar should be with a capital letter -> NavigationBar

All components should be with a capital letter. If a component with a small letter, it is perceived as if the component is a tag.

answered Aug 15 '17 at 11:14

Andrii Starusiev

7,564
2
28
37

An Nguyen · Accepted Answer · 2017-08-15T11:57:42.700

1

EDIT !!

As @Andrew state: the root cause is your class name class navigationBar. Change it to class NavigationBar and export it correctly should fix it export default NavigationBar;`

export default navigationBar;

You are exporting with navigationBar by default. Please update the import:

import navigationBar from './navigationBar';

And

<div className="container"> <navigationBar/> </div>

edited Aug 15 '17 at 11:57

answered Aug 15 '17 at 11:15

An Nguyen

1,487
10
21

Export default will work even if he will importing like this `import Sdaskfhasdf from './navigationBar';` and in `Sdaskfhasdf` we will have an exported component. – Andrii Starusiev Aug 15 '17 at 11:51
@Andrew: Thank you. Since the owner has marked this one as the answer, I have edited the answer. – An Nguyen Aug 15 '17 at 11:58

Reactjs unseen components

2 Answers2