CODEWITHSUNDEEP
javascriptreactjstypescript
Yaya
Yaya

Reputation: 4838

How to define function types in component's props

I want to destructure a component props in type script
i'm using react-redux

the component takes an function as a action via connect in props

action takes an object with this type

  interface ContactFormTypes {
    FirstName: string;
    LastName: string;
    EmailAddress: string;
    PhoneNumber: string;
    Message: string;
  }

so here is how the action works

export const sendEmail = (contactData: ContactFormTypes) => {......}

it is a void function since it only sends request to API

in the connect function i pass the action into component's props

export default connect(null, { sendEmail })(Contact);

now i want to destructure that action in props what type should i use and is this a good approach for doing that??

const Contact = ({sendEmail:  ?????  })=>{
   
   return <div> ........

  }

Upvotes: -1

Views: 191

Answers (1)

SlothOverlord
SlothOverlord

Reputation: 2037

Export your interface first

    export interface ContactFormTypes {
    FirstName: string;
    LastName: string;
    EmailAddress: string;
    PhoneNumber: string;
    Message: string;
  }

Try this in your Contact component:

    import React, { FC } from 'react' //Functional component Type
    import {ContactFormTypes} from 'yourfile'
    
//Define a new interface for this component props
//define sendEmail as a function with (args: type) => return type
    interface Props {
        sendEmail: (contactData: ContactFormTypes) => void
    }
    
    
    const Contact: FC<Props> = ({sendEmail}) => {
         return (...)
    }

Upvotes: 1

Related Questions