title: Rendering Issue in React
body: <p>Ive been going insane for the past hour trying to figure out his bug &quot;Warning: Cannot update a component (<code>App</code>) while rendering a different component (<code>Nav</code>). To locate the bad setState() call inside <code>Nav</code>, follow the stack trace as described in <a href="https://reactjs.org/link/setstate-in-render%22" rel="nofollow noreferrer">https://reactjs.org/link/setstate-in-render&quot;</a></p>
  <pre><code>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 = ()=&gt; {
  const [page, setPage] = useState('home');
  
  if(page=='home')
  return(
    &lt;&gt;
    &lt;Nav setPage={setPage}/&gt;
    &lt;Home/&gt;
    &lt;/&gt;
  )
  else if(page=='drawings')
    return(
      &lt;&gt;
      &lt;Nav setPage={setPage}/&gt;
      &lt;Drawings/&gt;
      &lt;/&gt;
    )
  
  }
  
  export default App;
  </code></pre>
  <p>Nav.js</p>
  <pre><code>import React from 'react'
  import 'C:/Users/Bharat/Desktop/ecommerce/vgogh/src/App.css'
  const Nav = ({setPage}) =&gt; {
      return (
          &lt;&gt;
              &lt;nav className='navBar'&gt;
              &lt;div className=&quot;home&quot;&gt;&lt;button onClick={setPage('home')}&gt;Home&lt;/button&gt;&lt;/div&gt;
                  &lt;ul&gt;
                      &lt;li className=&quot;navItems&quot;&gt;&lt;button onClick={()=&gt;setPage('paintings')}&gt;Painting&lt;/button&gt;&lt;/li&gt;
                      &lt;li className=&quot;navItems&quot;&gt;&lt;button onClick={()=&gt;setPage('photos')}&gt;Photos&lt;/button&gt;&lt;/li&gt;
                      &lt;li className=&quot;navItems&quot;&gt;&lt;button onClick={()=&gt;setPage('drawings')}&gt;Drawings&lt;/button&gt;&lt;/li&gt;
                      &lt;li className=&quot;navItems&quot; id='cart'&gt;&lt;button onClick={()=&gt;setPage('cart')}&gt;Cart&lt;/button&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/&gt;
      )
  }
  export default Nav
  </code></pre>