CODEWITHSUNDEEP
javascriptreactjs
Kim Stacks
Kim Stacks

Reputation: 10812

componentWillUnMount not being called for reactjs 0.13

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name=description content="">
    <meta name=viewport content="width=device-width, initial-scale=1">
    <title>Component Lifecycle: Mounting</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0-beta.1/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0-beta.1/JSXTransformer.js"></script>
    <style type="text/css">
        body{margin: 25px;}
    </style>
</head>
<body>
    <button onClick="render()">Render</button>
    <button onClick="unmount()">Unmount</button>
    <hr />
    <div id="panel"></div>

    <script type="text/jsx;harmony=true">
    /** @jsx React.DOM */
    var APP = React.createClass({
        update:function() {
            var newVal = this.props.val + 1;
            this.setProps({val:newVal});
        },
        componentWillMount:function() {
            this.setState({m:2});
            if (this.props.val === 0) {
                this.btnStyle = {'color' : 'red'};
            }
        },
        render: function() {
            console.log("hello world");
            return <button 
                        style={this.btnStyle}
                        onClick={this.update}>
                        {this.props.val*this.state.m}
                    </button>
        },
        componentDidMount:function(rootNode) {
            this.inc = setInterval(this.update, 500);
        },
        componentWillUnMount:function() {
            console.log("goodbye cruel world!");
            clearInterval(this.inc);
        }
    });
    window.render = function() {
        React.render(
            <APP val={0} />,
            document.getElementById('panel')
        );  
    };

    window.unmount = function() {
        React.unmountComponentAtNode(
            document.getElementById('panel')
        );  
    };

    </script>
</body>
</html>

My result:

enter image description here

As you can see, somehow the unmount is not being called in order for me to clearInterval. Everything else is working though.

Where did I go wrong?

Upvotes: 2

Views: 2934

Answers (1)

Joshua
Joshua

Reputation: 6665

To formalise Brandon Pugh's answer in the comments:

The method is componentWillUnmount.

The problem will be because of the capitalised M: 

        ...
    },
    componentWillUnMount:function() { // <- should be componentWillUnmount
        console.log("goodbye cruel world!");
        ...

Upvotes: 2

Related Questions