CODEWITHSUNDEEP
reactjscallbackreact-props
Manoj Rawat
Manoj Rawat

Reputation: 312

Maximum update depth exceeded in React error

So I was trying to send some props from child to parent and got this error. I am trying to send a callback function from child to parent and call that function in the child component. I have used this before but this time I got this error.

Here is my Parent Component.

import React from 'react';
import AppBar from '@material-ui/core/AppBar';

import SideDrawer from './SideDrawer';

class Header extends React.Component {

    state={
        drawerOpen:false
    }

    toggleDrawer = (value)=>{
        this.setState({
            drawerOpen: value
        });
    }


    render(){
        return(

              <AppBar>

                    <SideDrawer
                         open={this.state.drawerOpen}
                         onClose={this.toggleDrawer}
                       />    

              </AppBar>

        );
    }
}

export default Header;

Here is the child component

import React from 'react';
import Drawer from '@material-ui/core/Drawer';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';


const SideDrawer = (props) => {
    return (
       <Drawer
         anchor="right"
         open={props.open}
         onClose={props.onClose(false)}
       >

       </Drawer>
    );
};

export default SideDrawer;

Upvotes: 1

Views: 282

Answers (1)

Trisma
Trisma

Reputation: 763

You get this error because you are triggering a continuous update thing.

Your <Drawer /> component directly fires the onClose prop. To prevent this, you can write the component as followed : 

<Drawer
   anchor="right"
   open={props.open}
   onClose={() => props.onClose(false)}
>
</Drawer>

This way it will only be triggered onClose

To have a full loop detail, here it is :

  • Drawer is rendered, onClose is triggered.
  • onClose updated the drawerOpen value
  • State has updated, re-render SideDrawer because it uses the drawerOpen value from state
  • Drawer is rendered, onClose is triggered.
  • And the loop starts again, kind of infinitely

Upvotes: 3

Related Questions