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>`
Related
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?
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 />;
WHY IS THIS NOT POPPING OUT AN ALERT BOX ON CLICKING THE LINK BEFORE GOING TO THE LINK????
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Home from './Home.js';
function Admin() {
return (
<div className="App">
<h2>ADMIN WORK WILL BE HERE</h2>
LOGOUT
</div>
);
}
export default Admin;
import React from 'react';
import './App.css';
function App() {
return (
<div className="App">
<h2>ADMIN WORK WILL BE HERE</h2>
<a href="http://localhost:3000/" onClick={() => alert('You are going to be logged out!!')}>LOGOUT</a>
</div>
);
}
export default App;
You can use an arrow function to achieve this
onclick={() => alert("You are going to be logged out!!")}
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)
I'm trying to display a component in button click, What do I need to change in the syntax?
Anyone understand where the mistake is?
The functions works but not as I need to,
I have progressed since the previous question here display a different component with each button click
I really want to understand the right and the simple method
Thanks!
App.js
import React, {useState} from 'react';
import './App.css';
import Addroom from './components/Addroom.js'
import HomePage from './components/HomePage.js'
function App() {
const [flag, setFlag] = useState(false);
return (
<div className="App">
<h1>My Smart House</h1>
<button className="button1" onClick={()=>setFlag(!flag)}>Change Flag</button>
{flag.toString()}
<Addroom a={(!flag)}/>
<HomePage h={(flag)}/>
</div>
)
}
export default App;
HomePage.js
import React from 'react'
export default function HomePage(props) {
return (
<div>
<h2> HomePage {props.h}</h2>
</div>
)
}
Addroom.js
import React from 'react';
export default function Addroom(props) {
return (
<div>
<h2> Addroom {props.a}</h2>
</div>
)
}
With conditional operator condition ? exprIfTrue : exprIfFalse
{flag ? <Addroom /> : <HomePage /> }
If you don't need to use the flag inside components, skip passing as props
look at this sample
sample