React App is only rendering index.css but not the App.js

Question

My react app is not rendering and I don't know what I'm doing wrong, the page is just the background color. I'm able to build the app with no errors. And I'm importing all the files into App and App on index.js.

App.js:

import React from 'react';
import { useState } from 'react';
import Header from './components/Header';
import Nav from './components/Nav';
import About from './components/pages/About';
import Skills from './components/pages/Skills';
import Projects from './components/Projects';
import Resume from './components/pages/Resume';
import Contact from './components/pages/Contact';
import Footer from './components/Footer';

const App = () => {
    const [currentPage, setCurrentPage] = useState('About');

    const renderPage = () => {
        if (currentPage === "About") {
            return <About />;
          }
          if (currentPage === "Skills") {
            return <Skills />;
          }
          if (currentPage === "Projects") {
            return <Projects />;
          }
          if (currentPage === "Contact") {
            return <Contact />;
          }
          return <Resume />;
        };
      
        const handlePageChange = (page) => setCurrentPage(page);
      
        return (
          <div>
            <Nav currentPage={currentPage} handlePageChange={handlePageChange} />
            <Header />
            {renderPage()}
            <Footer/>
          </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.querySelector("#root"))

index.css

* {
    margin:0;
    padding: 0;
    border:0;
    outline:0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
}

:root {
    --color-bg: #1f1f38;
    --color-bg-v: #2c2c6c;
    --color-pr: #4db5ff;
    --color-pr-v:rgba(77,181,255,0.4);
    --color-w:white;
    --color-light: rgba(255,255,255,0.6);
    --container-w-lg:75%;
    --container-w-md:86%;
    --container-w-sm: 90%;
    --transition: all 400ms ease;
}

html {
    scroll-behavior:smooth;
}

::-webkit-scrollbar {
    display:none
}

body {
    font-family: 'Poppins', sans-serif;
    background: var(--color-bg);
    color: var(--color-w);
    line-height: 1.7;
}

.container {
    width: var(--container-w-lg);
    margin: 0 auto;
}

h1,
h2,
h3,
h4,
h5 {
    font-weight: 500;
}

h1 {
    font-size:2.5rem;
}

section {
    margin-top: 8rem;
}

section > h2, section > h5 {
    text-align: center;
    color: var(--color-light)
}

section > h2 {
    color: var(--color-pr);
    margin-bottom: 3rem;;
}

.text-light {
    color: var(--color-light);
}

a {
    color: var(--color-pr);
    transition: var(--transition);
}

a:hover {
    color: var(--color-w);
}
.btn {
    width: max-content;
    display: inline-block;
    color: var(--color-pr);
    padding: 0.75rem 1.2rem;
    border-radius:0.4rem;
    cursor:pointer;
    border: 1px solid var(--color-pr);
    transition: var(--transition);
}

.btn:hover {
    background: var(--color-w);
    color: var(--color-bg);
    border-color: transparent;
}

.btn-primary {
    background: var(--color-pr);
    color:var(--color-bg)
}

img{
    display:block;
    width: 100%;
    object-fit: cover;
}

@media screen and (max-width: 1024px) {
    .container {
        width: var(--container-w-md);
    }
    section {
        margin-top: 6rem;
    }  
}

@media screen and (max-width: 1024px) {
    .container {
        width: var(--container-w-sm);
    }
    section > h2{
        margin-top: 2rem;
    }  
}

I tried rewrite the functions without using arrow functions, tried to rename the files, and tried to write the content from the App into another file and import to App, cause I read it could solve my problem. But nothing worked.

Did you check if you got some errors in the devTools console? — Tehila
– Tehila, Commented Nov 21, 2022 at 5:17
yes, there is an error "react dom client webpack_imported_module_1.render is not a function at ./src/index.js". I tried to fix that using this(didn’t work): import {StrictMode} from 'react'; import {createRoot} from 'react- dom/client'; import App from './App' const rootElement = document.getElementById('root'); const root = createRoot(rootElement); root.render( <StrictMode> <App /> </StrictMode>, ); — Gabriella
– Gabriella, Commented Nov 21, 2022 at 5:29
I also tried this: import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <App /> ); — Gabriella
– Gabriella, Commented Nov 21, 2022 at 5:32
Hi Tehila, I just figure out the problem. The Nav.js was empty and i was trying to render it. Int the past it worked, but apparently now its an issue. Anyways I really appreciate the help! — Gabriella
– Gabriella, Commented Nov 21, 2022 at 5:57

Samathingamajig · Accepted Answer · 2022-11-21 05:31:02Z

0

You're rendering wrong, the way you do that was updated in React 18.

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

const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App/>);

answered Nov 21, 2022 at 5:31

Samathingamajig

13.5k3 gold badges19 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Gabriella Over a year ago

I did this but didn’t solve it. thanks though

Samathingamajig Over a year ago

@Gabriella what is the error now?

Gabriella Over a year ago

Now I have lots of errors, the first one is

react-jsx-dev-runtime.development.js:87 Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.  Check your code at App.js:35.     at App (http://localhost:3000/static/js/bundle.js:48:88) printWarning @ react-jsx-dev-runtime.development.js:87

Tehila Over a year ago

Did you export all the other components that you call in your renderPage function?

Gabriella Over a year ago

Hey, I just figure out the problem. The Nav.js was empty and i was trying to render it. Int the past it worked, but apparently now its an issue. Anyways I really appreciate the help!

|

Collectives™ on Stack Overflow

React App is only rendering index.css but not the App.js

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related