Editing a rich data structure in React.js

Question

I\'m trying to create a simple grid-based editor for a data structure and I\'m having a couple conceptual problems with React.js. Their documentation is not very helpful on this

Answer 1

I have been exploring ReactJS for the past week or so. My input to your question is asking a new question: why do you separate the Cell component from the Row and Grid components?

Coming from a Backbone background, Cell & Row & Grid makes sense, to have granular control over individual Cell Backbone.Views. However, it seems like that granular control & DOM update is what ReactJS tries to solve for you, which to me speaks for having a Grid component which implements a Row/Cell inside itself:

var Grid = React.createClass({
    onChange: function(evt, field) {
        this.props.data[field] = evt.target.value;
    },

    render: function () {
        var rows = this.state.data.map(function (rowData, index) {
            return (
                

                    
                    
                    
                
            );
        });

        return 

                   {rows}
               
;
    }
});

(Ignore the on*Change handling, room for improvement there. Untested code)

The question is, would you ever re-use Cell or Row as individual components elsewhere? To me the answer is a "very likely no". In which case my solution above makes sense, IMHO, and gets rid of the problem of passing data and changes up & down.