why isn't rendering? (react.js)

Question

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

what it currently looks like

It might not be the cause but React components need to be named with PascalCase, not camelCase. So `NavBar` not `navBar`. And you should do a `export default NavBar` and then import as `import NavBar from './components/NavBar'`; — Andy, Apr 10 '22 at 00:05

Mukul Kumar Jha · Answer 1 · 2022-04-10T00:24:16.323

1

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

edited Apr 10 '22 at 00:24

answered Apr 10 '22 at 00:16

Mukul Kumar Jha

1,062
7
19

It's not React that does that but it's Babel while it transpiles JSX, it gets lower case as html and makes React.createElement(...) . – Cesare Polonara Apr 10 '22 at 00:22
1

@CesarePolonara, Correct, I just used React ( now updated to included babel as well) just to keep it simple. – Mukul Kumar Jha Apr 10 '22 at 00:27

score 0 · Answer 2 · answered Apr 10 '22 at 00:24

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?

why isn't rendering? (react.js)

My current navBar.js code

Current UI state

2 Answers2