0
174
Viewswhy isn't <navBar/> rendering? (react.js)
In React.js, I'm trying to render a banner with a navbar underneath it (basic stuff) but I can't figure it out.
My current navBar.js code
import React from "react";
import { ReactDOM } from "react-dom";
export function navBar() {
return (
<div>
<nav className = "nav">
<a>Upload Items</a>
<a>New Items</a>
<a>Textbooks</a>
<a>Electronics</a>
<a>Life</a>
<a>Accessories</a>
<a>others</a>
</nav>
</div>
);
}
import logo from './logo.svg';
import React, { useState } from 'react';
import './App.css';
import ReactDOM from 'react-dom';
import {navBar} from './components/navBar'
function App() {
//let [categories, setCategories] = useState(['textbooks', 'electronics', 'life', 'accessories', 'others'])
return (
<div className="App">
<header className="App-header">
<img className='logo' src={require('./revelliePicture.jpg')}/>
<h1>Aggie Market</h1>
</header>
<navBar />
</div>
);
}
export default App;
Current UI state
·
Juan Pablo Isaza
2 answers
Answer question0
This is because how React (Babel) differentiate between built in DOM components and user defined components. If your component doesn't start with capital letter its assumed that its a DOM component/ element, since there is no such DOM element, it does not work as expected.
Correct your naming and you will get the intended UI.
Read the official docs here
·
Juan Pablo Isaza
Report
0
Change :
import React from "react";
import { ReactDOM } from "react-dom";
export function navBar() {
return (
<div>
<nav className = "nav">
<a>Upload Items</a>
<a>New Items</a>
<a>Textbooks</a>
<a>Electronics</a>
<a>Life</a>
<a>Accessories</a>
<a>others</a>
</nav>
</div>
);
}
to:
import React from "react";
import { ReactDOM } from "react-dom";
export function NavBar() {
return (
<div>
<nav className = "nav">
<a>Upload Items</a>
<a>New Items</a>
<a>Textbooks</a>
<a>Electronics</a>
<a>Life</a>
<a>Accessories</a>
<a>others</a>
</nav>
</div>
);
}
React Components name must begin with a Capital Case letter.
Then use it like: <NavBar />
Reasons of this beahviour: ReactJS component names must begin with capital letters?
·
Juan Pablo Isaza
Report
Answer question