title: Typescript/React: "Object is possibly 'null'"
body: <p>I'm changing a React component to Typescript. It calls an API. I believe my interfaces are set up correctly, but I'm not passing the types correctly.</p>
  <h1>How do I fix the two errors in the Parent below?</h1><br/>
  <ul>
  <li><code>return &lt;div&gt;Error: {error.message}&lt;/div&gt;; // &quot;Object is possibly 'null'&quot;</code><br/></li>
  <li><code>{stories.results.map((story, idx) =&gt; { // &quot;Object is possibly 'null' or 'undefined'&quot;</code><br/></li>
  <li><code>alt={  // Type 'string | null' is not assignable to type 'string | undefined'. Type 'null' is not assignable to type 'string | undefined'.</code></li>
  </ul>
  <br/>
  <h3>My Interfaces</h3>
  <br/>
  <pre class="lang-js prettyprint-override"><code>export interface NewsProps {
    results?: (ResultsEntity)[] | null;
  }
  export interface ResultsEntity {
    section: string;
    title: string;
    abstract: string;
    url: string;
    multimedia?: (MultimediaEntity)[] | null;
  }
  export interface MultimediaEntity {
    url: string;
    caption: string;
    alt:string;
  }
  </code></pre>
  <h3>Parent Component</h3>
  <br/>
  <pre class="lang-js prettyprint-override"><code>import React, { FC, ReactElement, useEffect, useState } from &quot;react&quot;;
  import Story from &quot;./Story&quot;;
  
  const News: FC&lt;NewsProps&gt; = ({results:ResultsEntity}):ReactElement =&gt; {
    const [error, setError] = useState(null);
    const [stories, setStory] = useState&lt;NewsProps&gt;();
  
    useEffect(() =&gt; {
      const getCurrentPage = () =&gt; {
        const url = new URL(window.location.href);
        const page = url.pathname.split(&quot;/&quot;).pop();
        return page ? page : &quot;home&quot;;
      };
  
      const section = getCurrentPage();
  
      fetch(
        `https://api.nytimes.com/svc/topstories/v2/${section}.json?api-key=4fzCTy6buRI5xtOkZzqo4FfEkzUVAJdr`
      )
        .then((res) =&gt; res.json())
        .then((data) =&gt; {
          setTimeout(() =&gt; setStory(data), 1500);
        })
        .catch((error) =&gt; {
          setError(error);
        });
    }, []);
  
    if (error) {
      return &lt;div&gt;Error: {error.message}&lt;/div&gt;; // &quot;Object is possibly 'null'&quot;
    } else 
    if (!stories) {
      return &lt;div&gt;Loading...&lt;/div&gt;
    } else {
      return (
        &lt;&gt;
          &lt;ul className=&quot;stories&quot;&gt;
            {stories.results.map((story, idx) =&gt; {  // &quot;Object is possibly 'null' or 'undefined'&quot;
              return (
                &lt;Story
                  key={idx}
                  title={story.title}
                  abstract={story.abstract}
                  img={story.multimedia[0].url}
                  alt={  // Type 'string | null' is not assignable to type 'string | undefined'. Type 'null' is not assignable to type 'string | undefined'.
                    story &amp;&amp;
                    story.multimedia &amp;&amp;
                    story.multimedia[0] &amp;&amp;
                    story.multimedia[0].caption
                      ? story.multimedia[0].caption
                      : null
                  }
                  link={story.url}
                /&gt;
              );
            })}
          &lt;/ul&gt;
        &lt;/&gt;
      );
    }
  }
  export default News;
  </code></pre>
  <br/>
  <h3>Child</h3>
  <br/>
  <pre class="lang-js prettyprint-override"><code>import React, { FC, ReactElement } from &quot;react&quot;;
  
  interface StoryProps {
    title?: String;
    img?: string;
    alt?: string;
    abstract?: string;
    link?: string;
  }
  
  const Story: FC&lt;StoryProps&gt; = ({title, img, alt, abstract, link}): ReactElement =&gt; {
    return (
      &lt;div className=&quot;story&quot;&gt;
        &lt;li className=&quot;story-title&quot;&gt;{title}&lt;/li&gt;
        &lt;span className=&quot;story-content&quot;&gt;
          &lt;img className=&quot;story-img&quot; src={img} alt={alt} /&gt;
          &lt;span&gt;
            &lt;li className=&quot;story-body&quot;&gt;{abstract}&lt;/li&gt;
          &lt;/span&gt;
        &lt;/span&gt;
      &lt;/div&gt;
    );
  };
  export default Story;
  </code></pre>