How can I make a React "If" component that acts like a real "if" in Typescript? : <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>
