title: How to pass React Component as props to another component
body: <p>I am trying to call PopupDialog.tsx inside Content.tsx as a sibling of Item.tsx. 
  Previously PopupDialog.tsx is called inside C.tsx file but due to z index issue i am trying to bring it out and call it in Content.tsx</p>
  
  <p>Is it possible to somehow pass the whole component(popupDialog and its parameters) in Content.tsx so that i could avoid passing back and forth the parameters needed for popupdialog in content.tsx. </p>
  
  <p>Code in C.tsx where PopupDialog component is called.</p>
  
  <pre><code>const C = (props: Props) =&gt; (
    &lt;&gt;
        {props.additionalInfo ? (
        &lt;div className="infoButton"&gt;
          &lt;PopupDialog   // need to take this code out and want to add in Content.tsx 
            icon="info"
            callback={props.callback}
            position={Position.Right}
          &gt;
            &lt;div className="popuplist"&gt;{props.additionalInfo}&lt;/div&gt;
          &lt;/PopupDialog&gt;
        &lt;/div&gt;
      ) : (
        &lt;Button className="iconbutton"/&gt;
      )}
    &lt;/&gt;
  );
  </code></pre>
  
  <p>Content.tsx where i would like to call PopupDialog.tsx with its parameters </p>
  
  <pre><code>const Content = (props: Props) =&gt; {
    const [componentToRender, docomponentToRender] = React.useState(null);
    const [isAnimDone, doAnim] = React.useState(false);
    return (
      &lt;div className="ContentItems"&gt;
        &lt;PWheel agent={props.agent} /&gt;
        {isAnimDone &amp;&amp; (
          &lt;&gt;
            &lt;Item {props.agent} /&gt;
            {componentToRender &amp;&amp;
              &lt;PopupDialog/&gt;     //want to call here with all its parameters to be passed
            }
          &lt;/&gt;
        )}
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p>Folder Structure</p>
  
  <pre><code>App.tsx
   -&gt;ViewPort.tsx
     -&gt;Content.tsx
       -&gt;PWheel.tsx
       -&gt;Item.tsx
         -&gt;A.tsx
           -&gt;B.tsx
             -&gt;C.tsx
              {props.additionalinfo &amp;&amp;
                -&gt;PopupDialog.tsx
       -&gt;PopupDialog.tsx
  </code></pre>