CODEWITHSUNDEEP
javascriptjqueryreactjs
zahra khalafi
zahra khalafi

Reputation: 91

Maximum call stack size exceeded - reactjs

I'm a beginner at react.js.

I got this error:

Maximum call stack size exceeded

full error output in my browser chrome console:

Uncaught RangeError: Maximum call stack size exceeded
at warning (bundle.js:1977)
at callHook (bundle.js:11215)
at emitEvent (bundle.js:11225)
at Object.onBeforeMountComponent (bundle.js:11502)
at Object.mountComponent (bundle.js:13853)
at ReactCompositeComponentWrapper.performInitialMount (bundle.js:7622)
at ReactCompositeComponentWrapper.mountComponent (bundle.js:7509)
at Object.mountComponent (bundle.js:13856)
at ReactCompositeComponentWrapper.performInitialMount (bundle.js:7622)
at ReactCompositeComponentWrapper.mountComponent (bundle.js:7509)

my codes:

var React=require('react');
var ReactDOM=require('react-dom');

class App extends React.Component{
    render(){
        return(
            <div>
                < Header />,
                < Main />,
                < Footer />
            </div>
        );
    }
}

class Header extends React.Component{
    render(){
        return(
            <Header>
                <nav>
                    <h1>Header</h1>
                </nav>
            </Header>
        );
    }
}

class Main extends React.Component{
    render(){
        return(
            <div>
                <p> text 1</p>
            </div>
        );
    }
}

class Footer extends React.Component{
    render(){
        return(
            <h2>Footer</h2>
        );
    }
}

ReactDOM.render(<App/> ,  document.getElementById('app'));

Upvotes: 1

Views: 5161

Answers (3)

Mohhamad Hasham
Mohhamad Hasham

Reputation: 2032

Change this ,

class Header extends React.Component{
    render(){
        return(
            <Header>
                <nav>
                    <h1>Header</h1>
                </nav>
            </Header>
        );
    } 
}

To

class Header extends React.Component{
    render(){
        return(
            <div>
                <nav>
                    <h1>Header</h1>
                </nav>
        </div>
        );
    }
}

Upvotes: 0

Danil Speransky
Danil Speransky

Reputation: 30453

You're making a recursive call by rendering Header in Header.

Change your code to use header for real html tags:

class Header extends React.Component{
    render(){
        return(
            <header>
                <nav>
                    <h1>Header</h1>
                </nav>
            </header>
        );
    }
}

Upvotes: 0

Debabrata
Debabrata

Reputation: 498

It is because you have <Header> tag inside the header component so that is causing an infinite loop i think..try removing this..you are calling header in the App component and which ids again calling the header component and so on. You should just render like this

class Header extends React.Component{
render(){
    return(
            <nav>
                <h1>Header</h1>
            </nav>
    );
}
}

Upvotes: 1

Related Questions