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
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}/>;
});
Solution
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
OTHER TIPS
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});
You can actually just do the following in your render
return this.transferPropsTo(<tileSimple />);
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;