Problem with exporting/importing React component

Question

I'm trying to create a React component for a navigation bar.

This component I'd like to import from a separate file into my App.js. Currently, the component should just return a simple 'Hello world' paragraph, but I have trouble getting this to work.

I have written the following code into a file located at src/components/navbar.js:

import React from 'react';

export default class navBar extends React.Component {
    render() {
        return (
            <p>Hello world.</p>
        )
    }
}

Now I'd like to import this component from my src/App.js, which looks like this:

import React, { Component } from 'react';
import './App.css';

import navBar from './components/navbar.js'

class App extends Component {
    render() {
        return (
            <navBar/>
        );
    }
}

export default App;

If I compile and open the site, nothing's there, which confuses me.

I'd be very thankful for any help!

EDIT: It's been suggested that the problem is that <App /> is not being rendered anywhere. I don't believe that's the case, since there's another file being created by default (index.js), which looks like this:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

serviceWorker.unregister();

I have also tried putting the paragraph (and the entire navbar) directly into src/App.js.

After compiling I could see the expected results in the browser, so the problem should lie with the exporting/importing.

How do you compile the site? How do you run the server? Is there anything in the console? — Aurea
– Aurea, Commented Dec 30, 2018 at 23:13
Is this the entire code you have? Because if so <App /> isn't rendered into the DOM anywhere. Edit: use capital names for components: <NavBar /> — user5734311
– user5734311, Commented Dec 30, 2018 at 23:18
@Aurel Bílý I'm using JetBrains' WebStorm to compile and run. I created a new project and chose React App as project type. There's nothing in the console. — pfincent
– pfincent, Commented Dec 30, 2018 at 23:18
The issue is you need to replace navBar with NavBar in App.js — user5734311
– user5734311, Commented Dec 30, 2018 at 23:23

quirimmo · Accepted Answer · 2018-12-30 23:23:46Z

3

In JSX, lower case tags are considered to be simple HTML/SVG elements. You can use lower case only if you use accessors (so with a dot like bla.blabla).

You can read about it here for example.

So in your case you must change the class name navBar to NavBar and then in the render method:

render() {
        return (
            <NavBar/>
        );
    }

answered Dec 30, 2018 at 23:23

quirimmo

10k3 gold badges33 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

pfincent Over a year ago

I'm pretty new to JS and had no idea this would make any difference. Thank you very much, it works now!

user5734311 Over a year ago

@pfincent JS doesn't care; React does.

Tarreq · Accepted Answer · 2018-12-30 23:36:17Z

1

Here is a full working example: ** Note: NavBar.js shoud start with a Capital letter.

App.js

import React from "react";
import ReactDOM from "react-dom";
import NavBar from "./components/NavBar";

function App() {
  return (
    <div className="App">
      <NavBar />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

NavBar.js

import React from "react";

export default class NavBar extends React.Component {
  render() {
    return (
      <div>
        <p>Hello world.</p>
      </div>
    );
  }
}

answered Dec 30, 2018 at 23:36

Tarreq

1,3551 gold badge10 silver badges18 bronze badges

Collectives™ on Stack Overflow

Problem with exporting/importing React component

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related