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
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
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?
Related
Ive been going insane for the past hour trying to figure out his bug "Warning: Cannot update a component (App) while rendering a different component (Nav). To locate the bad setState() call inside Nav, follow the stack trace as described in https://reactjs.org/link/setstate-in-render"
import React, {useState, useEffect} from 'react'
import React, {useState, useEffect} from 'react'
import './App.css';
import Cart from './pages/cart'
import Home from './pages/home'
import Drawings from './pages/drawings'
import Paintings from './pages/paintings'
import Photos from './pages/photos'
import Nav from './pages/components/nav'
const App = ()=> {
const [page, setPage] = useState('home');
if(page=='home')
return(
<>
<Nav setPage={setPage}/>
<Home/>
</>
)
else if(page=='drawings')
return(
<>
<Nav setPage={setPage}/>
<Drawings/>
</>
)
}
export default App;
Nav.js
import React from 'react'
import 'C:/Users/Bharat/Desktop/ecommerce/vgogh/src/App.css'
const Nav = ({setPage}) => {
return (
<>
<nav className='navBar'>
<div className="home"><button onClick={setPage('home')}>Home</button></div>
<ul>
<li className="navItems"><button onClick={()=>setPage('paintings')}>Painting</button></li>
<li className="navItems"><button onClick={()=>setPage('photos')}>Photos</button></li>
<li className="navItems"><button onClick={()=>setPage('drawings')}>Drawings</button></li>
<li className="navItems" id='cart'><button onClick={()=>setPage('cart')}>Cart</button></li>
</ul>
</nav>
</>
)
}
export default Nav
In Nav.js
Instead of writing this:
<button onClick={setPage('home')}>Home</button>
You can write :
<button onClick={()=>setPage('home')}>Home</button>
I think you got it.
To know more about handling event you can read their documentation. https://reactjs.org/docs/handling-events.html
After some scouring, I figured out I missed an arrow function in my "home" button in nav.js which as plichard pointed out caused an infinite loop.
Previous:
<div className="home">
<button onClick={setPage('home')}>Home</button>
</div>`
Solved:
<div className="home">
<button onClick={()=>setPage('home')}>Home</button>
</div>`
I am trying to use a navlink in my app.jsx file to create links in my navbar but when I try to npm start, I dont see the nav links and I get a message that says No routes matched location "/". I'm not sure why. I saw somewhere that I needed to start using element but I'm not sure how. I'll show app.jsx file with the element statements that didn't seem to work still and the file without using element at all which also didn't help but is what I'm used to. Can someone point me in the right direction?
index.js :
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './pages/App/App';
import { BrowserRouter, Routes, Route } from 'react-router-dom'
ReactDOM.render(
<BrowserRouter>
<Routes>
<React.Fragment>
<Route render={() => <App/>} />
</React.Fragment>
</Routes>
</BrowserRouter>,
document.getElementById('root')
);
App.jsx : with element
import React, { useState } from 'react';
import { Route, NavLink } from 'react-router-dom'
import './App.css';
function App() {
const [puppies, setPuppies] = useState([])
return (
<div className="App">
<header className="App-header">
React Puppies CRUD
<nav>
<NavLink exact to='/' element={<div>Index</div>}>Puppy List</NavLink>
<NavLink className='m-left' exact to='/add' element={<div>Add</div>}>Add Puppy</NavLink>
</nav>
</header>
<main>
</main>
</div>
);
}
export default App;
App.jsx : without element
import React, { useState } from 'react';
import { Route, NavLink } from 'react-router-dom'
import './App.css';
function App() {
const [puppies, setPuppies] = useState([])
return (
<div className="App">
<header className="App-header">
React Puppies CRUD
<nav>
<NavLink exact to='/'>Puppy List</NavLink>
<NavLink className='m-left' exact to='/add'>Add Puppy</NavLink>
</nav>
</header>
<main>
</main>
</div>
);
}
export default App;
Links use a to prop for the target route they are linking to, and the UI needs to be rendered on Route components on the element prop. I suggest unconditionally rendering the App component and move the routes into it.
Example:
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './pages/App/App';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App/>
</BrowserRouter>,
document.getElementById('root')
);
App
import React, { useState } from 'react';
import { Routes, Route, NavLink } from 'react-router-dom'
import './App.css';
function App() {
const [puppies, setPuppies] = useState([]);
return (
<div className="App">
<header className="App-header">
React Puppies CRUD
<nav>
<NavLink end to='/'>Puppy List</NavLink>
<NavLink className='m-left' to='/add'>Add Puppy</NavLink>
</nav>
</header>
<main>
<Routes>
<Route path="/" element={<div>Puppy List</div>} />
<Route path="/add" element={<div>Add Puppy</div>} />
</Routes>
</main>
</div>
);
}
export default App;
I am following along a beginner's course on React. The Nav. Bar has two options - About, HomePage. On clicking on the bar, the url gets updated but the page remains the same and nav stays. I get no error.
App.js
import React from 'react';
import HomePage from './HomePage';
import About from './About';
import Header from './common/Header';
function App() {
function getPage() {
const route = window.location.pathname;
if (route === "about") return <About />;
console.log("hi");
return <HomePage />;
}
return(
<div className="container-fluid">
<Header>
{ getPage() }
</Header>
</div>
);
}
export default App;
Header.js
import React from 'react';
//to navigate across the website
function Header(){
return (
<nav>
Home | About
</nav>
);
}
export default Header;
index.js
import "bootstrap/dist/css/bootstrap.min.css";
import React from "react";
import {render} from "react-dom";
import App from "./components/App";
render(<App />, document.getElementById("root"));
About.js
import React from 'react';
class About extends React.Component{
render (){
return(
<>
<h1> About </h1>
<p> This is the About Page </p>
</>
);
}
}
export default About;
HomePage.js
import React from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
function HomePage(){
return(
<div className="jumbotron">
<h1>
Welcome
</h1>
<p>
This is my first React Project
</p>
</div>
);
}
export default HomePage;
There is no change in the page, only the URL gets updated.
I have tried many solutions on SO but none worked so far.
I'm guessing it always displays the <HomePage /> component?
That's because window.location.pathname returns a path with a leading slash. So route === "about" will always be false. You need to check route === "/about" instead.
In getPage function condition is wrong it's not about it's will be /about
Just change condition in if statement
like this
if (route === "/about") return <About />;
Imported component to my app.js file but it is not rendering?
I built a topbar-component in another file but not able to render the topbar-component in my app.js file.
APP.js >
import React from 'react';
import './App.css';
import topbarComponent from "./topbar";
function App() {
return (
<div className="App">
{topbarComponent}
<div className="VideoGrid">
</div>
</div>
);
}
export default App;
Topbar.js>
import React from "react"
const topbarComponent = () => {
return (
<header className="top_bar">
<span><sapn>Video</sapn>Share</span>
<nav>
Home
Contact
About
</nav>
</header>
);
}
export default topbarComponent
React component names should start with an uppercase letter. your topbarComponent should then become TopbarComponent.
Topbar.js
import React from "react"
const TopbarComponent = () => {
return (
<header className="top_bar">
<span><sapn>Video</sapn>Share</span>
<nav>
Home
Contact
About
</nav>
</header>
);
}
export default TopbarComponent
Rendering a component is similar to returning html tags, where the angle brackets are used to do so. instead of {topbarComponent}, this would become
App.js
import React from 'react';
import './App.css';
import TopbarComponent from "./topbar";
function App() {
return (
<div className="App">
<TopbarComponent />
<div className="VideoGrid">
</div>
</div>
);
}
export default App;
curly braces, which you have used, are used when wanting to return a value of a variable within the jsx (react elements)
So I have a react-js script that I have a core/main.js and the main app.js file.
The data in main.js won't appear in the div "welcome" in app.js - when I call the function that should fire it.
main.js
import React from 'react';
import ReactDOM from 'react-dom';
export default function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
// highlight-next-line
ReactDOM.render(element, document.getElementById('welcome'));
}
App.js
import React from 'react';
import tick from './core/Main.js'
//import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<div id="welcome"></div>
{tick}
</header>
</div>
);
}
export default App;
How can I get this to show? I am trying to better understand this type of functions.
You should turn your function tick into a component (e.g. Tick, just to name in properly):
export default function Tick() {
return (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
}
If you do this you can then use it like any other React component:
import React from "react";
import Tick from "./core/Main.js";
//import logo from './logo.svg';
import "./App.css";
function App() {
return (
<div className="App">
<header className="App-header">
<div id="welcome">
<Tick />
</div>
</header>
</div>
);
}
export default App;
If you want to stick to your original way of using tick as a function (e.g. if you have some special requirements) you need to actually call that function somewhere, preferably after the initial render of App, inside a useEffect:
import React from "react";
import tick from "./core/Main.js";
//import logo from './logo.svg';
import "./App.css";
function App() {
React.useEffect(() => {
tick();
}, []);
return (
<div className="App">
<header className="App-header">
<div id="welcome"></div>
</header>
</div>
);
}
export default App;