Ad

React Uncaught TypeError: Cannot Read Property '__reactAutoBindMap' Of Undefined

- 1 answer

I am trying to display some data in html table with reactjs. But I kept getting error Uncaught TypeError: Cannot read property '__reactAutoBindMap' of undefined. I couldn't figure out what's wrong with my code.

<!DOCTYPE html>
<html>
    <head>
        <title>React Flux</title>
        <script src="https://fb.me/react-0.13.3.js"></script>
        <script src="https://fb.me/JSXTransformer-0.13.3.js"></script>
        <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    </head>
    <body>

        <div id="component" style="color:red"></div>

        <script type="text/jsx">


//
// create component
//
var Table = React.createClass({

    render: function render() {
        var _self = this;

        var thead = React.DOM.thead({},
            React.DOM.tr({},
                this.props.cols.map(function (col) {
                    return React.DOM.th({}, col);
            })));

        var tbody = this.props.rows.map(function (row) {
            return React.DOM.tr({},
            _self.props.cols.map(function (col) {
                return React.DOM.td({}, row[col] || "");
            }));
        });

        return React.DOM.table({}, [thead, tbody]);
    }

});

var container = document.querySelector("#container");

var tableModel = {
    cols: ["Name", "Age"],
    rows: [{
        "Name": "Chase",
            "Age": "27"
    }],

}

React.render(Table(tableModel), container);



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

Answer

I believe the main issue you have is that your Table component is defined within the global scope of your page, which means that your this will be undefined because we're in "strict" mode. Secondly, you are calling the Table component directly as a function, as opposed to using JSX. When rendering, React is assuming a specific value for this, but in this case it's undefined, hence the error you are seeing.

So, the first step here would be to change your render function to something like this:

React.render(<Table cols={tableModel.cols} rows={tableModel.rows} />, container);

Finally, I think you'll discover after trying the above that you're targeted container is not quite right. It's looking for an element with an id of container but that element doesn't existing within your html so you'll need to make a change there as well.

Ad
source: stackoverflow.com
Ad