Rendering Issue in React

Question

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

voted to close as typo. (you provided anonymous arrow functions for all your buttons except the home button resulting in infinte setPage('home') calls) — pilchard
– pilchard, Commented Jun 12, 2022 at 20:49
I swear on my life I just found the same solution as I was scouring my code and was about to post it, I didn't provide an arrow function for my home. Thanks — Het Patel
– Het Patel, Commented Jun 12, 2022 at 20:52

Najmus Sakib · Accepted Answer · 2022-06-12 20:48:38Z

2

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

edited Jun 12, 2022 at 20:48

answered Jun 12, 2022 at 20:42

Najmus Sakib

5266 silver badges18 bronze badges

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

Comments

Lee Taylor · Accepted Answer · 2022-06-12 21:42:53Z

0

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.

<div className="home">
    <button onClick={setPage('home')}>Home</button>
</div>`

Solved:

<div className="home">
    <button onClick={()=>setPage('home')}>Home</button>
</div>`

edited Jun 12, 2022 at 21:42

Lee Taylor

7,99416 gold badges38 silver badges53 bronze badges

answered Jun 12, 2022 at 20:55

Het Patel

1293 silver badges10 bronze badges

Collectives™ on Stack Overflow

Rendering Issue in React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related