title: TypeScript - Type 'x' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Class>'
body: <p>I have passed a class method to a child component in other code(using tag [Component nameExample={this.method} /]) and it works perfectly, but when I try to do the same thing in another code, I get this following error:</p>
  
  <p><a href="https://i.stack.imgur.com/stiuW.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>What should I do to solve this error? I need to use Interface or Type even though the methods are within the class?</p>
  
  <p><strong>Parent Component (who will pass the method):</strong></p>
  
  <pre><code>import React from 'react';
  import { IonApp, IonRouterOutlet, IonTabButton, IonLabel, IonTabBar, IonTabs, IonModal, IonButton, IonContent, IonHeader, IonToolbar, IonTitle } from '@ionic/react';
  import { IonReactRouter } from '@ionic/react-router';
  import { Modal, Nav, Navbar } from 'react-bootstrap';
  import Chats from '../chats';
  import Contato from '../contato';
  
  interface mainProps {
      contatoProps: () =&gt; void;
  }
  
  class Main extends React.Component&lt;any, {showContato: boolean, showRecebimento: boolean, showLara: boolean, showPagamento: boolean, showDashboard: boolean}&gt;{ 
      constructor(props: any ){
          super(props);
  
          this.state = {
              showContato: false,
              showRecebimento: false,
              showLara: false,
              showPagamento: false,
              showDashboard: false,
          };
  
          this.showLaraTab = this.showLaraTab.bind(this);
          this.hideLaraTab = this.hideLaraTab.bind(this);
      }
  
      showLaraTab(value: boolean, tab: string){
          switch (tab) {
              case 'contato':
                  this.setState({ showContato: value });
                  break;
              case 'recebimento':
                  this.setState({ showRecebimento: value });
                  break;
              case 'lara':
                  this.setState({ showLara: value });
                  break;
              case 'pagamento':
                  this.setState({ showPagamento: value });
                  break;
              case 'dashboard':
                  this.setState({ showDashboard: value });
                  break;
          }
      }
  
      {/* Method that I want to pass in props  */}
  
      hideLaraTab(value: boolean, tab: string){
          switch (tab) {
              case 'contato':
                  this.setState({ showContato: value });
                  break;
              case 'recebimento':
                  this.setState({ showRecebimento: value });
                  break;
              case 'lara':
                  this.setState({ showLara: value });
                  break;
              case 'pagamento':
                  this.setState({ showPagamento: value });
                  break;
              case 'dashboard':
                  this.setState({ showDashboard: value });
                  break;
          }
      }
  
      render(){
          return (
              &lt;IonApp&gt;
                  &lt;IonReactRouter&gt;
                      {/* Component with a hidden modal */}
                      &lt;Contato contatoProps={this.hideLaraTab(false, 'contato')} /&gt; 
  
                      &lt;Chats /&gt;
                      &lt;Navbar className="t-bd" fixed="bottom"&gt;
                          {/* Nav Content */}
                      &lt;/Navbar&gt;
  
                  &lt;/IonReactRouter&gt;
              &lt;/IonApp&gt;
          );
      }
  
  }
  
  
  export default Main;
  </code></pre>
  
  <p><strong>Child Component (who will receive the method):</strong></p>
  
  <pre><code>import React from 'react';
  import { IonModal, IonHeader, IonTitle, IonToolbar,  IonContent } from "@ionic/react";
  import { SpeechRecognition } from '@ionic-native/speech-recognition/ngx';
  import Main from '../main/index';
  import toastr from 'toastr';
  import '../../toastr.min.css';
  
  
  class Contato extends React.Component&lt;{}, { matches: string, isRecording: boolean }, Main&gt;{
    constructor(props: any, private speechRecognition: SpeechRecognition ){
      super(props);
  
      this.state = {
        matches: '',
        isRecording: false,
      };
  
  
      this.checkAvaliable = this.checkAvaliable.bind(this);
      this.checkPermissions = this.checkPermissions.bind(this);
      this.getPermissions = this.getPermissions.bind(this);
      this.startListening = this.startListening.bind(this);
      this.stopListening = this.stopListening.bind(this);
  
    }
  
    checkAvaliable = () =&gt; {
      // Check feature available
      this.speechRecognition.isRecognitionAvailable()
      .then((available: boolean) =&gt; console.log(available))
    }
  
    checkPermissions = () =&gt; {
      // Check permission
      this.speechRecognition.hasPermission()
      .then((hasPermission: boolean) =&gt; console.log(hasPermission))
    }
  
    getLanguageList = () =&gt; {
      // Get the list of supported languages
      this.speechRecognition.getSupportedLanguages()
      .then(
        (languages: string[]) =&gt; console.log(languages),
        (error) =&gt; console.log(error)
      )
    }
  
    getPermissions = () =&gt; {
      // Request permissions
      this.speechRecognition.requestPermission()
      .then(
        () =&gt; console.log('Granted'),
        () =&gt; console.log('Denied')
      )
    }
  
    startListening = () =&gt; {
      let options = {
        language: 'pt-BR',
      };
  
      // Start the recognition process
      this.speechRecognition.startListening(options)
      .subscribe(
        (matches: string[]) =&gt; console.log(matches),
        (onerror) =&gt; console.log('error:', onerror)
      )
    }
  
    stopListening = () =&gt; {
      this.speechRecognition.stopListening().then(() =&gt; {
          this.setState({isRecording: false})
      });
    }
  
    render(){
      return(
      &lt;&gt;
        &lt;IonModal isOpen={false}&gt;
          &lt;IonHeader&gt;
            &lt;IonToolbar&gt;
              &lt;div className="d-flex"&gt;
                  &lt;button className="btn" onClick={this.props.contatoProps}&gt;&lt;i className="fas fa-arrow-left" /&gt;&lt;/button&gt;
                  &lt;IonTitle&gt;Novo Contato&lt;/IonTitle&gt;
                &lt;/div&gt;
            &lt;/IonToolbar&gt;
          &lt;/IonHeader&gt;
  
          &lt;IonContent&gt;
            &lt;div className="mb-3"&gt;
              &lt;h3&gt;O que eu entendi...&lt;/h3&gt;
              &lt;span&gt;{this.state.matches}&lt;/span&gt;
            &lt;/div&gt;
            &lt;div className="row mt-5"&gt;
              &lt;div className="col-12"&gt;
                &lt;button className="btn btn-tiber w-100" onClick={this.checkAvaliable}&gt;Check Avaliable&lt;/button&gt;
              &lt;/div&gt;
              &lt;div className="col-12"&gt;
                &lt;button className="btn btn-tiber w-100" onClick={this.checkPermissions}&gt;Check Permissions&lt;/button&gt;
              &lt;/div&gt;
              &lt;div className="col-12"&gt;
                &lt;button className="btn btn-tiber w-100" onClick={this.getLanguageList}&gt;Get Languages&lt;/button&gt;
              &lt;/div&gt;
              &lt;div className="col-12"&gt;
                &lt;button className="btn btn-tiber w-100" onClick={this.getPermissions}&gt;Get Permission&lt;/button&gt;
              &lt;/div&gt;
              &lt;div className="col-12"&gt;
                &lt;button className="btn btn-tiber w-100" onClick={this.startListening}&gt;Start Listening&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/IonContent&gt;
  
        &lt;/IonModal&gt;
  
      &lt;/&gt;
      );
    }
  
  
  }
  
  
  
  export default Contato;    
  
  </code></pre>