CODEWITHSUNDEEP
reactjs
Bryce Greene
Bryce Greene

Reputation: 13

React navbar component causing render to fail

I'm starting up a react project and I'm trying to add a simple Navbar.

My App.js looks like this 

import React, { Component, Navbar } from "react";
import TheNav from "./Components/Nav.js";
import "./App.css";

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

export default App;

My index.js looks like this:

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import registerServiceWorker from "./registerServiceWorker";

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

When I run this, the browser shouts this at me:

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.

Check the render method of App.

Any suggestions?

Upvotes: 1

Views: 48

Answers (1)

Tholle
Tholle

Reputation: 112777

React doesn't export a Navbar component. Use your own TheNav instead.

import React, { Component } from "react";
import TheNav from "./Components/Nav.js";
import "./App.css";

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

export default App;

Upvotes: 2

Related Questions