I am importing a component, but it does not render. The component is capitalized. I think there is something wrong with the import statement because when I remove it and replace with "Navbar", it renders, but if i keep the import then it does not render.
import styles from "./style";
import { Billing, Business, CardDeal, Clients, CTA, Footer, Navbar, Stats, Testimonials, Hero }
from "./components";
const App = () => { return (
<div className="bg-primary w-full overflow-hidden">
<div className={`${styles.paddingX} ${styles.flexCenter}`}>
<div className={`${styles.boxWidth}`}>
<Navbar />
</div>
</div>
</div>
);
};
export default App;
import React from 'react';
const Navbar = () => {
return (
<div>Navbar</div>
);
};
export default Navbar;
import Navbar from "./Navbar";
import Billing from "./Billing";
import CardDeal from "./CardDeal";
import Business from "./Business";
import Clients from "./Clients";
import CTA from "./CTA";
import Stats from "./Stats";
import Footer from "./Footer";
import Testimonials from "./Testimonials";
import Hero from "./Hero";
export {
Navbar,
Billing,
CardDeal,
Business,
Clients,
CTA,
Stats,
Footer,
Testimonials,
Hero,
};
If i exchange the component
for basic text like "Navbar" or "Navbar" it does not render either. These 2 display when I remove the import components statement.
When i control click , it brings me to the correct Navbar component.
I am following a yt tutorial
https://github.com/adrianhajdin/project_hoobank
my repo is here: https://github.com/lukasmckaine22/userbet_landing_page
I made sure the component was capitalized. I confirmed the component actually leads to the correct component by control clicking it. I confirmed the code renders plain text only when the import is removed. I confirmed the import leads to the correct file by control clicking. I tried only importing the Navbar with and without brackets. I changed the import directory to pull the navbar directory.
Related
I'm trying to use the header and sidebar from React Bootstrap and semantic UI react.
But when I add those components to my page they overlap each other.
How can I divide them? The sidebar, header, and main content should be separated.
Is there a way to create layouts in react?
App.js
import { Container, Row, Col } from "react-bootstrap";
import Stack from "react-bootstrap/Stack";
import Cardtest from "./Components/Card";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import SidebarTest from "./Components/Sidebar";
import Header from "./Components/Header";
function App() {
return (
<div>
<div>
<Header />
</div>
<SidebarTest />
<main>
Main content
</main>
</div>
);
}
export default App;
Its hard to tell without the CSS but try changing the nav bar position from
position:absolute;
I'm a beginner who's trying to make a simple website using React JS.
Here's my App.js file and the other component which is not rendering.
All the other components are rendering fine,Except for the one which I've provided code for(homePageProducts.js).
App.js
import './App.css';
import Header from './Components/Header';
import Footer from './Components/Footer';
import CarouselContainer from './Components/Carousel/CarouselContainer';
import homePageProducts from './Components/homePageProducts/homePageProducts';
import 'bootstrap/dist/css/bootstrap.min.css';
function App() {
return (
<div>
<Header></Header>
<CarouselContainer></CarouselContainer>
<homePageProducts></homePageProducts>
<Footer></Footer>
</div>
);
}
export default App;
homePageProducts.js
import React from 'react';
function homePageProducts()
{
return(
<div>
<p>Good morning</p>
</div>
);
}
export default homePageProducts;
PS I was just testing around with this component, Hence the simple code.
I've checked twice and I'm sure that I've imported homePageProducts.js correctly
If you meant to render a React component, start its name with an uppercase letter.
import HomePageProducts from './Components/homePageProducts/homePageProducts';
and render it
<HomePageProducts/>
make sure you have imported it correctly import homePageProducts from './Components/homePageProducts/homePageProducts'
Essentially, I want to generate a QR Code in a ReactJS application. I found a generator on npm for React & React Native. Here is how they set it up on the npm site:
import React from "react";
import ReactDOM from "react-dom";
import QRCode from "react-qr-code";
ReactDOM.render(<QRCode value="hey" />, document.getElementById("Container"));
Here is how I set up the page that will hold the QR Code:
import React from "react";
import ReactDOM from "react-dom";
import QRCode from "react-qr-code";
// empty profile page
class Profile extends React.Component
{
render()
{
return (
<div>
<h1>QR Code Page</h1>
</div>
);
}
}
//ReactDOM.render(<QRCode value="hey" />, document.getElementById("Container"));
export default Profile;
I have the actual QRCode code commented out, as I'm not sure where to put it in the code so that it works & shows up on the page. When I put it anywhere inside the Profile class the line has red underlines stating that a ";" or ")" is expected (depending on where it's put I get ";" or ")"). I know I'm not missing either, so I'm pretty sure it comes down to where I'm putting the line of code to generate the QRCode.
I'm sorry if this is is an obvious question, I'm still pretty new to React.
Please let me know if you need any more information!
You can just use the <QRCode value="hey"></QRCode>. You also don't need dom library for this. So I've removed it.
import React from "react";
import QRCode from "react-qr-code";
// empty profile page
class Profile extends React.Component
{
render()
{
return (
<div>
<h1>QR Code Page</h1>
<QRCode value="hey"></QRCode>
</div>
);
}
}
export default Profile;
Check out this live version to see it in action
https://codesandbox.io/s/billowing-butterfly-0dr39?file=/src/App.js
you can use it return itself it will work
return (
<div>
<h1>QR Code Page</h1>
<QRCode value="hey" />
</div>)
Try this.
import React from "react";
import QRCode from "react-qr-code";
// empty profile page
class Profile extends React.Component {
render() {
return (
<div>
<h1>QR Code Page</h1>
<QRCode value="hey" />
</div>
);
}
}
export default Profile;
I'm trying to build a portfolio website in React ,i'm very new to React (about 3 days), and i have imported some code for the website nav bar and declared it in the code but it doesn't show up on the website and vscode says that the value was not declared. How do i fix this?
I've tried turning the code into a component and rearranging the code but i still get the same result.
App.js - main code
import React from 'react';
import './App.css';
import navBar from './navBar/navBar';
function App() {
return (
<div className="app">
//navBar that won't show up
<navBar />
<div className="landingPage"></div>
<div className="projectPage"></div>
<div className="aboutPage"></div>
<div className="footer"></div>
</div>
)
}
export default App;
Code for the navBar
import React from "react";
import "./navBar.css";
function navBar() {
return (
<div>
<h1>NAVBAR PLACEHOLDER</h1>
</div>
)
}
export default navBar;
Your question title is little bit wierd. You have fixed the value error in your code. But you still have error with the component:
//navBar that won't show up
<navBar />
In react custom built components name should always start with capital letter. So do this:
import NavBar from './navBar/navBar';
// -- ^^ you can name it anything as it's default import
<NavBar />
I am learning react so forgive me if this has been asked a million times but I have browsed and no solution has fixed my issue. Apart from fixing the issue I would like to understand how the mechanics under the hood work...
I have 2 simple components NavBar and Home. Code below for both.
NavBar:
import React from "react";
class NavBar extends React.Component {
render () {
return (
<nav className="navbar sticky-top navbar-light" style={NavBarStyle}>
<a className="navbar-brand" href="/">
<img src={require('./av_tiny.png')} style={ImageStyle} alt="Logo"></img>
</a>
</nav>
)
}
}
const NavBarStyle = {
// some styling
}
const ImageStyle = {
width: '100px',
height: '50px',
marginLeft: '20px'
}
export default NavBar;
Home:
import React from "react";
class Home extends React.Component {
render(){
return(
<h1>Home</h1>
);
}
}
export default Home;
When I navigate between routes, the whole DOM re-renders. I don't want the NavBar to re-render. My routes are declared in App.js as per below, and I have tried moving <NavBar /> outside the <Router> tags and the other way around. I have also tried putting <NavBar /> in its own <div> tags. Still the app behaves the same, whenever I change the URL it re-renders everything. How can this be avoided and what should I read up to properly understand the mechanics?
import React from 'react';
import {BrowserRouter as Router, Route} from "react-router-dom";
//individual components
import Home from "./Home";
import SignInPage from "./Components/Login";
import NavBar from "./Components/Layout/NavBar"
//Routing to components
class App extends React.Component {
render() {
return(
<div>
<NavBar/>
<Router>
<Route exact path="/" component={Home}/>
<Route exact path="/login" component={SignInPage}/>
</Router>
</div>
)
}
}
export default App;
EDIT:
I think I should've mentioned that re-renders happen when I navigate by manually changing the URL in the browser. I have some code on my /login route that does this.props.history.push('/'); after successful login and the DOM does not re-render. Just {SignInPage} gets unmounted and {Home} gets mounted. I would expect the same behavior when navigating between the pages manually or am I missing something?
You're using <a> elements to create your links. These cause the browser to navigate to the new URL without triggering the JavaScript that would cause the content to be dynamically updated using React.
Use the <Link> component from whatever React Router library you are using instead.
Further reading:
Anchor tags vs Link components in React
The reason why it re-renders hole dom is that the router is changing root properties.
Take a look at nested routers, it will give you an idea of how to achieve your goal Nested routes with react router v4 / v5