what's the best way to deal with undefined props in react.js?
<p>Let's assume I have an action that gets dispatched on page load, like say, in the index.js file.</p>

<p>example</p>

<pre><code>store.dispatch(loadData());
</code></pre>

<p>in my reducer I initialize state to to an object. Something like this</p>

<pre><code> function myReducer(state = {}, action)
</code></pre>

<p>now I have some smart component that subscribes to my state and then passes it down to another component to display the data. Another important note for this scenario is the fact that the retrieval of the data is happening asynchronously.
Let's also assume that the key of this object is some array.
So the markup component would have something like this</p>

<pre><code>{this.props.object.key.map(k =&gt; do something)}
</code></pre>

<p>Now since key is undefined, if I call map on it, I blow up. The way I have been dealing with this, is by using a simple if check. If key is defined then run <code>.map</code> otherwise return null. Then by the time my data gets back from the server, the render will be called again due to a change in state that this component subscribed to. At this point the key is defined and map can be called.</p>

<p>Another approach, Is to define what your state will look like in the reducer. In other words, if I know that my state will be an object with an array property on it, I might do something like this.</p>

<pre><code>const initialState = {
  key:[]
}

function myReducer(state = initialState, action)
</code></pre>

<p>Doing this will benefit in the fact that now I won't need my if check since key is never undefined. </p>

<p>My questions is; are any of these approaches better than the other? Or perhaps, is there another way entirely to deal with this?</p>