How do I handle complex objects in ReactJS?

Question

I have the following ReactJS code :

var data1 = {"Columns":["Title1","Title2","Title3"],"Rows":[{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]},{"CellText":["Cell0","Cell1","Cell2"]}]};


var GridRow = React.createClass({
    render: function() {
        if(this.props.data){

        }
        return (
            <div>Text</div>
        );
    }
});


var GridList = React.createClass({
    render: function() {
        if(this.props.data){
            var Header = this.props.data.Columns.map(function (columns) {
                return (
                    <GridRow data={columns}>
                );
            });
            var Row = this.props.data.Rows.map(function (rows) {
                return (
                    <GridRow data={rows}>
                );
            });
        }
        return (
            <ul>
                <li>{Header}</li>
                <li>{Row}</li>
            </ul>
        );
    }
});


var GridBox = React.createClass({
    render: function(){
        return (
            <GridList data={data1} />
        );
    }
});

I'm trying to pass the data1 variable to the GridList where it is split up to Columns (for header) and rows. The problem is that I get the following exception at runtime:

In file "~/Scripts/Grid.jsx": Parse Error: Line 30: Unexpected token return (at line 30 column 6) Line: 52 Column:3

I'm running this from within Visual Studio 2013 with ReactJS.

The stated Line nr and colum makes no sense

Im trying to render a table based on metadata(columns) and row data from service.

Yes, but it isn't defined in your example, could you add it? That might help debug the issue :-) — Sean Vieira
– Sean Vieira, Commented Feb 9, 2015 at 19:51
Sorry but its just a simple string I have typed there, no variable at all. If I remove it I get this instead : In file "~/Scripts/Grid.jsx": Parse Error: Line 16: Unexpected token ; (at line 16 column 4) Line: 52 Column:3 but there is no ; at line 16. — Banshee
– Banshee, Commented Feb 9, 2015 at 19:53

Brigand · Accepted Answer · 2015-02-09 22:03:21Z

You need to close tags either with a matching closing tag, or using self closing tags.

// ERROR
<GridRow data={rows}>

// OK
<GridRow data={rows}></GridRow>

// Best
<GridRow data={rows} />

^{The error message isn't very helpful.}

Also, when creating an array of nodes, it's good to give them keys.

Rows.map(function(row, i){
    return <GridRow data={rows} key={i} />;
});

I played around with it some more, and the weirdness comes from JSX accepting anything between an opening tag and <, {, or } as raw text. If you did something like this:

var GridList = React.createClass({
    render: function() {
        if(this.props.data){
            var Header = this.props.data.Columns.map(function (columns) {
                return (
                    <GridRow data={columns}>
                );
            });
            var Row = this.props.data.Rows.map(function (rows) </GridRow>
            )});
        }
        return (
            <ul>
                <li>{Header}</li>
                <li>{Row}</li>
            </ul>
        );
    }
});

It'll happily output this:

var GridList = React.createClass({displayName: "GridList",
    render: function() {
        if(this.props.data){
            var Header = this.props.data.Columns.map(function (columns) {
                return (
                    React.createElement(GridRow, {data: columns}, 
                ");" + ' ' +
            "});" + ' ' +
            "var Row = this.props.data.Rows.map(function (rows) ")
            )});
        }
        return (
            React.createElement("ul", null, 
                React.createElement("li", null, Header), 
                React.createElement("li", null, Row)
            )
        );
    }
});

It's completely content until it encounters the { after Rows.map(function (rows), which means "go back into JavaScript expression mode", and it encounters a return in an expression, which is invalid, so it bails, and gives the best error it can.

Collectives™ on Stack Overflow

How do I handle complex objects in ReactJS?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related