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

Question

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.props.tiles.map(function(tile)        {            //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}/>;         }); 

Answer 1

Apparently transferPropsTo is being deprecated. With recent versions of React you can use JSX spread attributes:

return <tileSimple {...tile} />; 

More info about this here: Deprecating transferPropsTo

Answer 2

For those use cases, the easiest thing is to fallback to the JS API instead of JSX.

return tileSimple(tile); 

To understand why it works, look at the generated version of the version you want using the JSX Compiler tool ( http://facebook.github.io/react/jsx-compiler.html )

<tileSimple vsize = {tile.vsize} hsize = {tile.hsize} content = {tile.content}/>; tileSimple( {vsize:  tile.vsize, hsize:  tile.hsize, content:  tile.content});