How do you provide default props for nested shape in React?
<p>Is there a way in React to provide default props to a nested array of items of a certain shape? </p>

<p>Given the example below, my first attempt can be seen, however this doesn't work as expected. </p>

<pre><code>static propTypes = {
    heading: PT.string,
    items: PT.arrayOf(PT.shape({
        href: PT.string,
        label: PT.string,
    })).isRequired,
};

static defaultProps = {
    heading: 'this works',
    items: [{
        href: '/',
        label: ' - this does not - ',
    }],
};
</code></pre>

<p>In this example, I would expect the following:</p>

<pre><code>// Given these props
const passedInProps = {
    items: [{ href: 'foo' }, { href: 'bar' }]
};

// Would resolve to:
const props = {
    heading: 'this works',
    items: [
      { href: 'foo', label: ' - this does not - ' },
      { href: 'bar', label: ' - this does not - ' },
    ]
};
</code></pre>