In my index.js I am trying to render elements from App.js. I have another page named Home.js which I imported into App.js page .I am getting errors

  javascript, react-dom, react-navigation, reactjs

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
Check the render method of App.
App.js

import React from 'react';

//styling 
import './App.css';

//components
import Home from "./Home";


function App() {
return (
<div className="App">
  <div id="root"></div>
  <Home />
</div>
  
);
}

export default App;

index.js

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


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

Home.js

import React from 'react';
import { Navbar , Nav, Icon, Dropdown} from 'rsuite';

 const Home =(
 <Navbar>
<Navbar.Header>
    <a href="https://www.susanwairimu.xyz" className="navbar-brand logo">CODE HELPER</a>
</Navbar.Header>
<Navbar.Body>
    <Nav>
    <Nav.Item icon={<Icon icon="home" />} >Home</Nav.Item>
    <Nav.Item>News</Nav.Item>
    <Nav.Item>Products</Nav.Item>
    <Dropdown title="Languages">
      <Dropdown.Item>Java</Dropdown.Item>
      <Dropdown.Item>Python</Dropdown.Item>
      <Dropdown.Item>React JS</Dropdown.Item>
      <Dropdown.Item>PHP</Dropdown.Item>
      <Dropdown.Item>JavaScript</Dropdown.Item>
    </Dropdown>
    </Nav>
    <Nav pullRight>
    <Nav.Item icon={<Icon icon="cog" />} >Settings</Nav.Item>
  </Nav>
   </Navbar.Body>
  </Navbar>
    );


 export default Home;

FROM CONSOLE

Warning: React.jsx: 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.

Source: Ask Javascript Questions

LEAVE A COMMENT