title: How can I make a React "If" component that acts like a real "if" in Typescript?
body: <p>I made a simple <code>&lt;If /&gt;</code> function component using React:</p>
  
  <pre><code>import React, { ReactElement } from "react";
  
  interface Props {
      condition: boolean;
      comment?: any;
  }
  
  export function If(props: React.PropsWithChildren&lt;Props&gt;): ReactElement | null {
      if (props.condition) {
          return &lt;&gt;{props.children}&lt;/&gt;;
      }
  
      return null;
  }
  
  </code></pre>
  
  <p>It lets me write a cleaner code, such as:</p>
  
  <pre><code>render() {
  
      ...
      &lt;If condition={truthy}&gt;
         presnet if truthy
      &lt;/If&gt;
      ...
  </code></pre>
  
  <p>In most cases, it works good, But when I want to check for example if a given variable is not defined and then pass it as property, it becomes an issue. I'll give an example:</p>
  
  <p>Let's say I have a component called <code>&lt;Animal /&gt;</code> which has the following Props:</p>
  
  <pre><code>interface AnimalProps {
    animal: Animal;
  }
  </code></pre>
  
  <p>and now I have another component which renders the following DOM:</p>
  
  <pre><code>const animal: Animal | undefined = ...;
  
  return (
    &lt;If condition={animal !== undefined} comment="if animal is defined, then present it"&gt;
      &lt;Animal animal={animal} /&gt; // &lt;-- Error! expected Animal, but got Animal | undefined
    &lt;/If&gt;
  );
  </code></pre>
  
  <p>As I commented, althought in fact animal is not defined, I've got no way of telling Typescript that I already checked it. Assertion of <code>animal!</code> would work, but that's not what I'm looking for.</p>
  
  <p>Any ideas?</p>