TypeScript - Type 'x' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Class>'

Question

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:

enter image description here

What should I do to solve this error? I need to use Interface or Type even though the methods are within the class?

Parent Component (who will pass the method):

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: () => void;
}

class Main extends React.Component<any, {showContato: boolean, showRecebimento: boolean, showLara: boolean, showPagamento: boolean, showDashboard: boolean}>{ 
    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 (
            <IonApp>
                <IonReactRouter>
                    {/* Component with a hidden modal */}
                    <Contato contatoProps={this.hideLaraTab(false, 'contato')} /> 

                    <Chats />
                    <Navbar className="t-bd" fixed="bottom">
                        {/* Nav Content */}
                    </Navbar>

                </IonReactRouter>
            </IonApp>
        );
    }

}


export default Main;

Child Component (who will receive the method):

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<{}, { matches: string, isRecording: boolean }, Main>{
  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 = () => {
    // Check feature available
    this.speechRecognition.isRecognitionAvailable()
    .then((available: boolean) => console.log(available))
  }

  checkPermissions = () => {
    // Check permission
    this.speechRecognition.hasPermission()
    .then((hasPermission: boolean) => console.log(hasPermission))
  }

  getLanguageList = () => {
    // Get the list of supported languages
    this.speechRecognition.getSupportedLanguages()
    .then(
      (languages: string[]) => console.log(languages),
      (error) => console.log(error)
    )
  }

  getPermissions = () => {
    // Request permissions
    this.speechRecognition.requestPermission()
    .then(
      () => console.log('Granted'),
      () => console.log('Denied')
    )
  }

  startListening = () => {
    let options = {
      language: 'pt-BR',
    };

    // Start the recognition process
    this.speechRecognition.startListening(options)
    .subscribe(
      (matches: string[]) => console.log(matches),
      (onerror) => console.log('error:', onerror)
    )
  }

  stopListening = () => {
    this.speechRecognition.stopListening().then(() => {
        this.setState({isRecording: false})
    });
  }

  render(){
    return(
    <>
      <IonModal isOpen={false}>
        <IonHeader>
          <IonToolbar>
            <div className="d-flex">
                <button className="btn" onClick={this.props.contatoProps}><i className="fas fa-arrow-left" /></button>
                <IonTitle>Novo Contato</IonTitle>
              </div>
          </IonToolbar>
        </IonHeader>

        <IonContent>
          <div className="mb-3">
            <h3>O que eu entendi...</h3>
            <span>{this.state.matches}</span>
          </div>
          <div className="row mt-5">
            <div className="col-12">
              <button className="btn btn-tiber w-100" onClick={this.checkAvaliable}>Check Avaliable</button>
            </div>
            <div className="col-12">
              <button className="btn btn-tiber w-100" onClick={this.checkPermissions}>Check Permissions</button>
            </div>
            <div className="col-12">
              <button className="btn btn-tiber w-100" onClick={this.getLanguageList}>Get Languages</button>
            </div>
            <div className="col-12">
              <button className="btn btn-tiber w-100" onClick={this.getPermissions}>Get Permission</button>
            </div>
            <div className="col-12">
              <button className="btn btn-tiber w-100" onClick={this.startListening}>Start Listening</button>
            </div>
          </div>
        </IonContent>

      </IonModal>

    </>
    );
  }


}



export default Contato;    

Answer 1

I think your problem is that you are passing the result of the hideLaraTab function as a prop:

<Contato contatoProps={this.hideLaraTab(false, 'contato')} /> 

Instead you want to pass a function that can be called inside the Contato component:

<Contato contatoProps={() => this.hideLaraTab(false, 'contato')} /> 

I hope this helps.