title: How to use Render Props in functional component using typescript
body: <p>I'm trying to convert my React app (create-react-app) to use Typescript and I've hit a hurdle with a component that uses render props.</p>
  
  <p>Here's a simplified version which still has the error...</p>
  
  <pre><code>import React from 'react'
  
  type Props = {
      fullWidth?: boolean,
      renderRightSection?: React.ReactNode
  }
  
  const Component = React.forwardRef&lt;HTMLInputElement, Props&gt;((props, ref) =&gt; {
  
      let {fullWidth, renderRightSection, ...inputProps} = props
  
      return (
  
          &lt;InputWrapper fullWidth={props.fullWidth}&gt;
  
              &lt;input {...inputProps} ref={ref} /&gt;
  
              {renderRightSection &amp;&amp; renderRightSection()}
  
          &lt;/InputWrapper&gt;
  
      )
  
  })
  </code></pre>
  
  <p>The error is with the <strong>renderRightSection()</strong> bit and looks like this:</p>
  
  <pre><code>let renderRightSection: string | number | true | {} | React.ReactElement&lt;any, string | ((props: any) =&gt; React.ReactElement&lt;any, string | ... | (new (props: any) =&gt; React.Component&lt;any, any, any&gt;)&gt; | null) | (new (props: any) =&gt; React.Component&lt;...&gt;)&gt; | React.ReactNodeArray | React.ReactPortal
  This expression is not callable.
    No constituent of type 'string | number | true | {} | ReactElement&lt;any, string | ((props: any) =&gt; ReactElement&lt;any, string | ... | (new (props: any) =&gt; Component&lt;any, any, any&gt;)&gt; | null) | (new (props: any) =&gt; Component&lt;...&gt;)&gt; | ReactNodeArray | ReactPortal' is callable.ts(2349)
  </code></pre>
  
  <p>Any help would really be appreciated.</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>To show how I am using the component in a form:</p>
  
  <pre><code>&lt;Textbox 
      name="username" 
      type="text" 
      fullWidth={true} 
      placeholder="Choose a Username" 
      renderRightSection={() =&gt; (
          &lt;TextboxBadge&gt;
              {usernameAvailable &amp;&amp; &lt;span&gt;Available&lt;/span&gt;}
              {!usernameAvailable &amp;&amp; &lt;span&gt;Taken&lt;/span&gt;}
          &lt;/TextboxBadge&gt;
      )}
  /&gt;
  </code></pre>
  
  <p><strong>Edit:</strong></p>
  
  <p>And here's what it's used for, rendering a block of JSX on the right hand side of the textbox.</p>
  
  <p><a href="https://i.stack.imgur.com/oE90S.png" rel="noreferrer"><img src="https://i.stack.imgur.com/oE90S.png" alt="Screenshot"></a></p>