(first ever question asked please go easy on me)
HI I’ve copy and pasted a component from a guided project to see that nothing has rendered..
thing’s I’ve done:
- imported same modules
- replaced images
- changed app.js to only show this component
- replaced styling with styling from guided project (guided project works fine in other tab)
what checks do you do after nothing has rendered?
NavBar2.js
import { useState, useEffect } from "react";
import { Navbar, Nav, Container } from "react-bootstrap";
import { HashLink } from 'react-router-hash-link';
import {
BrowserRouter as Router
} from "react-router-dom";
const NavBar2 = () => {
const [activeLink, setActiveLink] = useState('home');
const [scrolled, setScrolled] = useState(false);
useEffect(() => {
const onScroll = () => {
if (window.scrollY > 50) {
setScrolled(true);
} else {
setScrolled(false);
}
}
window.addEventListener("scroll", onScroll);
return () => window.removeEventListener("scroll", onScroll);
}, [])
const onUpdateActiveLink = (value) => {
setActiveLink(value);
}
return (
<Router>
<Navbar expand="sm" className={scrolled ? "scrolled" : ""}>
<Container>
<Navbar.Brand href="/">
<img src= "src/assets/Adobe_Photoshop_CC_icon.png" alt="Logo" />
</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav">
<span className="navbar-toggler-icon"></span>
</Navbar.Toggle>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="ms-auto">
<Nav.Link href="#home" className={activeLink === 'home' ? 'active navbar-link' : 'navbar-link'} onClick={() => onUpdateActiveLink('home')}>Home</Nav.Link>
<Nav.Link href="#skills" className={activeLink === 'skills' ? 'active navbar-link' : 'navbar-link'} onClick={() => onUpdateActiveLink('skills')}>Skills</Nav.Link>
<Nav.Link href="#projects" className={activeLink === 'projects' ? 'active navbar-link' : 'navbar-link'} onClick={() => onUpdateActiveLink('projects')}>Projects</Nav.Link>
</Nav>
<span className="navbar-text">
<div className="social-icon">
<a href="#"><img src="src\assets\Adobe_Photoshop_CC_icon.png" alt="" /></a>
<a href="#"><img src='src\assets\Adobe_Photoshop_CC_icon.png' alt="" /></a>
<a href="#"><img src='src\assets\Adobe_Photoshop_CC_icon.png' alt="" /></a>
</div>
<HashLink to='#connect'>
<button className="vvd"><span>Let’s Connect</span></button>
</HashLink>
</span>
</Navbar.Collapse>
</Container>
</Navbar>
</Router>
)
}
export default NavBar2
App.js
import logo from './logo.svg';
import './App.css';
import NavBar2 from "./components/NavBar2";
function App() {
return (
<div className="App">
<NavBar2/>
</div>
);
}
export default App;
ok here are errors i get but i dont see any reference to code i’ve written/copy.pasted
expected render of a navigation bar, received a blank screen
>Solution :
I posted your code into a StackBlitz and changed
import { useState, useEffect } from "react";
to
import React, { useState, useEffect } from "react";
then ran an npm install to make sure I had the latest of all your packages. This is rendering for me. Double check all your imports and versions of packages.