In this example, I have shared how do you provide default props for nested shape in React? However, one approach might be to have a Child component for each item. That way each Child component receives one object from the item array, and then the default props will be merged as you expect.
For example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
render: function() { return ( <div> {this.props.item.map(function(item) { return <Child {...item} /> })} </div> ); } }); var Child = React.createClass({ propTypes: { href: React.PropTypes.string, label: React.PropTypes.string }, getDefaultProps: function() { return { href: '/', label: ' - this does not - ' }; }, render: function() { return ( <div /> <p>href: {this.props.href}</p> <p>label: {this.props.label} </div> ); } }); |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.