ReactJS: Maximum update depth exceeded error

Question

ReactJS: Maximum update depth exceeded error

I'm attempting to flip the condition of a part in ReactJS yet I get a error expressing:

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside component will update or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

I don't see the infinite loop in my code, would anyone be able to help?

ReactJS segment code:

import React, { Component } from 'react';

import styled from 'styled-components';



class Item extends React.Component {

    constructor(props) {

        super(props);     

        this.toggle= this.toggle.bind(this);

        this.state = {

            details: false

        } 

    }  

    toggle(){

        const currentState = this.state.details;

        this.setState({ details: !currentState }); 

    }



    render() {

        return (

            <tr className="Item"> 

                <td>{this.props.config.server}</td>      

                <td>{this.props.config.verbose}</td> 

                <td>{this.props.config.type}</td>

                <td className={this.state.details ? "visible" : "hidden"}>PLACEHOLDER MORE INFO</td>

                {<td><span onClick={this.toggle()}>Details</span></td>}

            </tr>

    )}

}



export default Item;

react-native reactjs javascript

3 years ago by Kajalsi45d

3 Answers

Login / Signup to Answer the Question.

Login Signup

**espadacoder11** · Answer 1 · 2021-07-03T11:41:07

that because you calling toggle inside the render method which will cause to re-render and toggle will call again and re-rendering again and so on

this line at your code



{<td><span onClick={this.toggle()}>Details</span></td>}

you need to make onClick refer to this.toggle not calling it

to fix the issue do this



{<td><span onClick={this.toggle}>Details</span></td>}

**sandhya6gczb** · Answer 2 · 2021-07-05T13:09:13

You should pass the event object when calling the function :



{<td><span onClick={(e) => this.toggle(e)}>Details</span></td>}

If you don't need to handle onClick event you can also type :



{<td><span onClick={(e) => this.toggle()}>Details</span></td>}

Now you can also add your parameters within the function.

**RoliMishra** · Answer 3 · 2021-07-06T12:32:53

if you don't need to pass arguments to function, just remove () from function like below:

<td><span onClick={this.toggle}>Details</span></td>

but if you want to pass arguments, you should do like below:

<td><span onClick={(e) => this.toggle(e,arg1,arg2)}>Details</span></td>

C TUTORIAL

C PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

C++ TUTORIAL

C++ PROGRAMS

INTERVIEW TESTS

EXECUTE CODE

PYTHON TUTORIAL

PYTHON HOW TOS

INTERVIEW TESTS

EXECUTE CODE

JAVA TUTORIAL

JAVA CODE EXAMPLES

SPRING TUTORIAL

MORE IN JAVA

COMPUTER ARCHITECTURE

COMPUTER NETWORK

OPERATING SYSTEM

DBMS & SQL

PL/SQL

MongoDB

EXECUTE SQL

ANDROID DEVELOPMENT

GO LANGUAGE

LINUX

DOCKER

HTML TAGS (A to Z)

CSS REFERENCES

SASS/SCSS

KOTLIN

GAME DEVELOPMENT

PHP

GIT GUIDE

JAVASCRIPT

ADVANCED DSA

ReactJS: Maximum update depth exceeded error

3 Answers

Login / Signup to Answer the Question.