title: Typescript & React: Passing props between components vs default props
body: <p>I am fairly new to Typescript and creating a React app with Typescript. I'm having a bit of trouble passing props from one component to another. I've included an example below, my issue is around default props for components.</p>
  
  <p>When I call my child component in my parent component, I get an error:</p>
  
  <p><code>Type '{}' is missing the following properties from type 'IProps': className, disabled ts(2739)</code></p>
  
  <p>I thought that because I have default props on my child component, they would fill in for any missing props when calling the component from other components.</p>
  
  <p>I know I can make individual props optional in the interface <code>IProps</code> in my child component using <code>className?: string</code> but this is not a solution I'm looking for as it presents more problems than it solves. </p>
  
  <p>I'd prefer not to have to note each default prop when I call a child from another component like below as for some components, I have many props:
  <code>&lt;Child class={''} disabled={false} /&gt;</code></p>
  
  <p>I'm sure there's a fairly simple solution for this but I can't find any direction so far. Any advice or direction would be welcome.</p>
  
  <pre><code>// Parent component: 
  
  import React, { FC } from 'react'
  
  import Child from './child'
  
  const Parent: FC = () =&gt; {
      return (
          &lt;Child /&gt;
      )
  }
  
  export default Parent
  
  
  // Child component: 
  
  import React, { FC } from 'react'
  
  interface IProps {
    className: string
    disabled: boolean
  }
  
  const Child: FC&lt;IProps&gt; = ({ className, disabled }: IProps) =&gt; {
    return (
      &lt;button className={className} disabled={disabled}&gt;
        Click here
      &lt;/button&gt;
    )
  }
  
  Child.defaultProps = {
    className: '',
    disabled: false,
  }
  
  export default Child
  </code></pre>