How to find reactJS errors?

Question

I have been learning ReactJS a couple of days now but Im often ending up on a Server Error in '/' Application page that dont really point out where to lock for the problem. For example, this is a error I get right now :

Server Error in '/' Application.

In file "~/Scripts/Grid.jsx": Parse Error: Line 106: Adjacent XJS elements must be wrapped in an enclosing tag (at line 106 column 58) Line: 52 Column:3

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code. 

Exception Details: React.Exceptions.JsxException: In file "~/Scripts/Grid.jsx": Parse Error: Line 106: Adjacent XJS elements must be wrapped in an enclosing tag (at line 106 column 58) Line: 52 Column:3

Source Error: 


Line 8:  { Line 9:      <h2>Index</h2> Line 10:     @Html.React("GridBox", new Line 11:     { Line 12:         tableClass
= "GridTest",

Source File: c:\Development\Bradspel_v2\Bradspel_v2\Views\Home\Index.cshtml    Line: 10

The code looks like this :

var data1 = {"Columns":[{"Title":"Title1","HTMLClass":"g1_Title"},{"Title":"Title2","HTMLClass":"g2_Title"},{"Title":"Title3","HTMLClass":"g3_Title"}],"Rows":[{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]},{"Cells":["Cell0","Cell1","Cell2"]}]};


var GridRow = React.createClass({
    render: function() {
        var data = [], columns;

        if(this.props.columns){
            for(var i = 0; i < this.props.columns.length; i++){
                data.push({
                    HTMLclass: this.props.columns[i].HTMLClass,
                    content: this.props.cells[i]
                })
            }
        }


        columns = data.map(function(col, i) {
            return (
                <td className={col.HTMLclass} key={i}>{col.content}</td>
            );
        }.bind(this));

        return (
            <tr>
                {columns}
            </tr>
        );
    }
});
var GridHead = React.createClass({
    render: function() {
        if(this.props.data){
            var cell = this.props.data.Title;
            var htmlClass = this.props.data.HTMLClass;
        }
        return (
            <th className={htmlClass}>{cell}</th>
        );
    }
});
var GridList = React.createClass({
    render: function() {
        var tableClass = this.props.tableClass;
        if(this.props.data){
            var header = this.props.data.Columns.map(function (columns, i) {
                return (
                    <GridHead data={columns} key={i} />
                );
            });
            var row = this.props.data.Rows.map(function (row, i) {
                return ( **<<< HERE line 52**
                    <GridRow columns={data1.Columns} cells={row.Cells} key={i} />
                );
            });
        }
        return (
            <table className={tableClass}>
                <tr>{header}</tr>
                <tbody>
                    {row}
                </tbody>
            </table>
        );
    }
});

var GridPager = React.createClass({
    handleClick: function(event) {
        alert('clicked');
    },
    return: function() {

        var page


        return(
            <a onClick={this.handleClick}>Paging</a>
        );
    }
});


var GridBox = React.createClass({
    loadCommentsFromServer: function() {
        var xhr = new XMLHttpRequest();
        xhr.open('get', this.props.url, true);
        xhr.onload = function() {
          var data = JSON.parse(xhr.responseText);
          this.setState({ data: data });
        }.bind(this);
        xhr.send();
    },
    getInitialState: function() {
        return { data: this.props.initial };
    },
    render: function(){
        var tableClass = this.props.tableClass;
        return (
            <GridList data={data1} tableClass={tableClass} />
            <GridPager>
        );
    }
});

There is a problem at line 106, this is the line direcly after the last line of code so this gives me nothing. Then we got a Line 52. I have marked the line 52 in above code(<<< HERE line 52) and you can see that there is only a return? So how am I really supose to manage to finde where the error really is?

Info : Im using Visual Studio 2013 ASP.NET MVC 5 with ReactJS.NET and for editing jsx files Im using Sublime TEXT 3.

Answer 1

React expects a single element to be returned from a render method. A div needs to be wrapped around the components rendered in the GridBox render method return. Also GridPager is missing its closing tag:

 render: function(){
    var tableClass = this.props.tableClass;
    return (
        <div>
            <GridList data={data1} tableClass={tableClass} />
            <GridPager/>
        </div>
    );
}