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

CodePudding user response：

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

CodePudding user response：

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?

CodePudding user response：

navBar.js:

import React from "react";
import { ReactDOM } from "react-dom";

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>

    );
}
export default navBar