خطأ Maximum update depth exceeded

أحاول أن أقوم بتغير الحالة الخاصة بمكون react عند  الضغط على زر معين لتصبح true بدلًا من false أو العكس ولكن يظهر لي الخطأ التالي:

اقتباس

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

فهمت من الخطأ أنه تم تغير حالة المكون عدد كبير من المرات، وللحفاظ على أداء الصفحة يظهر هذا الخطأ، لكن المشكلة أن هذا الخطأ يظهر بدون أن أضغط على الزر حتى.

هذا الكود الذي أستعمله:

import React, { Component } from 'react';

class Row extends React.Component {
    constructor(props) {
        super(props);     
        this.toggle= this.toggle.bind(this);
        this.state = {
            details: false
        } 
    }  
    toggle(){
        this.setState({ details: !this.state.details }); 
    }

    render() {
        return (
            <div> 
                <span className={this.state.details ? "block" : "hidden"}>Some Content</span>
                {<div className="btn btn-lg" onClick={this.toggle()}>Toggle</div>}
            </div>
    )}
}

export default Row;