ReactJs passing methods as props from one class to the next (with typescript)

Question

I worked with react before, but using type script I am having issues pass methods as props. I having trouble following some of the examples on the internet.

Property 'onDrawerToggle' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ companyId: string; }> & Readonly<{ children?: ReactNode; }>'. TS2322

import React from 'react';
import HeaderBar from './Header';

import SideDrawer from './SideDrawer';
import BackDrop from './BackDrop';

interface PassedProps extends React.Props<any> {
  onDrawerToggle:any
}

interface MyState {
  value: string
}



export default class FrontScreen extends React.Component <{},{sideDrawer:any},PassedProps>{
  constructor(props: any) {
    super(props);
    this.state = {
      sideDrawer: false
    };
  }

drawerToggleClickHandler() {
  this.setState((prevState)=>{ 
    this.state.sideDrawer != prevState.sideDrawer
  });
}

render() {
      return (
        <div className="fluid-container">
        <HeaderBar onDrawerToggle={this.drawerToggleClickHandler()} companyId="10"></HeaderBar>
        </div>
      );
    }
  }

I am trying to pass a method to next class, but i keep getting an error. I trying to figure this out cause i never used typescript if you could give me an example I would be able to replicate and understand it.


import React from 'react';
import { Navbar, Nav, Form, Button, FormControl } from 'react-bootstrap';
import axios from 'axios';
import ProfileButton from './ProfileButton';


interface Props {
  drawerClick: () => any;
}


export default class HeaderBar extends React.Component <{companyId:string},{companyName:any},{drawerClick:any}>{
  constructor(props: any) {
    super(props);
    this.state = {
      companyName: 'load',
    };
  }

  limitTextFilter(text:string){
    if(text.length > 14) {
      return text.substring(0,14);
    }
    return text;
  }

  componentDidMount() {
  axios.request(
    {method:'get',
    url:'http://localhost:3000/company'
  })
      .then(res  => {
        this.setState({ companyName: res.data.companyName });
        console.log(res)
      })
}

render() {
      return (

        <Navbar className="cs-header-bar p-0">
        <Nav className="align-middle w-100">

          <Nav.Link className="text-white">        
          <ProfileButton onClick={this.props.drawerClick}/>
          </Nav.Link>
          <Nav.Link className="text-white align-self-center">
          <p className="cs-link cs-company-name">{this.limitTextFilter(this.state.companyName)} 
          </p>
         </Nav.Link>
        </Nav>
        </Navbar>


      );
    }
  }

Mirone Mirone · Accepted Answer · 2020-04-21T02:22:18

You pass the onDrawerToggle as an prop of the component HeaderBar, so you must declare the type of props of the component HeaderBar.

type Props = {
  onDrawerToggle: Function
}
export default class HeaderBar extends React.Component<Props>{
  ...
}

By the way, you can declare the state type of your component by passing the second type param:

export default class HeaderBar extends React.Component<Props, State>{
  ...
}

ReactJs passing methods as props from one class to the next (with typescript)

1 Answers