title: Is there a better solution than adding || [ ] to each field for a null check in ES6
body: <p>I am working with a child <code>component</code> where an <code>array</code> item is passed as prop. However, that item also contains another <code>array</code> where there should be <code>null</code> and <code>undefined</code> check before rendering. Adding <code>|| []</code> to each filed didn't seem the best way. Is there a better way that I am missing?</p>
  <pre><code>const ChildComponent= ({ newsItem, textColor, newsItemHeadingColor }) =&gt; {
    const imageFormats = newsItem?.itemImage?.formats;
    const imageSrc = useProgressiveImage({ formats: imageFormats });
    const history = useHistory();
  
    const { state } = useContextState();
    const { schemeMode, colorSchemes } = state;
  
    const { itemTagColor, itemTagTextColor } = getThemeColors({
      schemeMode,
      colorSchemes,
      colors: {
        itemTagColor: newsItem?.itemTagColor?.name,
        itemTagTextColor: newsItem?.itemTagTextColor?.name,
      },
    });
  
    return (
      &lt;NewsItem
        onClick={() =&gt; {
          const url =
            newsItem?.itemTag === 'Lab'
              ? getPageLink({
                  page: newsItem?.itemLink || [], &lt;&lt;&lt;&lt;&lt;&lt; this check
                })
              : newsItem?.itemLink || []; &lt;&lt;&lt;&lt;&lt;&lt; this check
          url &amp;&amp; history.push(url);
        }}
      &gt;
        &lt;ImageContainer&gt;
          &lt;Image src={imageSrc} alt={`${newsItem?.itemImage || []}`} /&gt; &lt;&lt;&lt;&lt;&lt;&lt; this check
        &lt;/ImageContainer&gt;
        &lt;NewsItemTag color={itemTagColor} itemTagTextColor={itemTagTextColor}&gt;
          &lt;Body4&gt;{`${newsItem?.itemTag || []}`}&lt;/Body4&gt;               &lt;&lt;&lt;&lt;&lt;&lt; this check
        &lt;/NewsItemTag&gt;
        &lt;NewsItemName newsItemHeadingColor={newsItemHeadingColor}&gt;{`${
          newsItem?.itemTitle || []                                     &lt;&lt;&lt;&lt;&lt;&lt; this check
        }`}&lt;/NewsItemName&gt;
        &lt;Description textColor={textColor}&gt;{`${
          (newsItem.description &amp;&amp;
            newsItem?.itemDescription) || []                          &lt;&lt;&lt;&lt;&lt;&lt; this check
        }`}&lt;/Description&gt;
      &lt;/NewsItem&gt;
    );
  };
  </code></pre>