0
172
Visualizaçõeswhy 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 Respostas
Responde à pergunta0
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
Relatório
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
Relatório
Responde à pergunta