React.js — How to pass properties object to child component?


I have a component called tileGroup that has a property that is a collection(array) of other properties.

The parent component(tileGroup) renders a list of child components by using each set of properties in the collection to create a new component.

Right now I am individually mapping each property from the set to the child component but this will become cumbersome if the property count for a component increases and I'm sure there is a cleaner, simpler way to do it...

How can I pass the full set of properties on to the child component without remapping each property?

Example code:

tileGroupData = {someProperty: 'something', someOtherProperty:'something', 
                tiles: [{vsize:1, hsize:2, etc...}, {vsize:2,hsize:3,title:'whatever'}]};

and then component creation..

var tileGroup = React.createClass({
    render: function() {
       var thechildren =
           //this is what I DON'T want to be doing. 
           return <tileSimple vsize = {tile.vsize} hsize = {tile.hsize} content = {tile.content}/>;

           //what I DO want to be doing
           return <tileSimple allTheProps = {tile}/>; 


What you propose doing,

return <tileSimple allTheProps={tile} />;

works just fine.

Within the tileSimple component you should then be able to access the properties using syntax like,

var vsize = this.props.allTheProps.vsize;
var hsize = this.props.allTheProps.hsize;
By : lostriebo

This video can help you solving your question :)
By: admin