CODEWITHSUNDEEP
reactjstypescriptinputonchange
Eduard Wild
Eduard Wild

Reputation: 47

pass arguments like onChange and onClick to a react component with typescript

I'm trying to create a page with react, for that I'm using typescript.

In the project there is a component that is an input and in it I want there to be an onChange function, but when I put it in the component, it has a red dash, indicating that there is an error, how could I pass the onChange correctly? I know how to do it using javascript, but not with typescript.

I made the code as follows:

import { StyledInput } from "./Input.styles";

export const Input = ( { onChange } ) => {
    return(
        <StyledInput onChange={onChange}/>
    )
}

Upvotes: 0

Views: 192

Answers (1)

Damian Green
Damian Green

Reputation: 7495

You need to define the prop type, e.g.

export const Input = ( { onChange }:{ onChange:(x:string)=>void } ) => {

Or more precisely

type Props ={ onChange:React.ComponentProps<typeof<StyledInput>>['onChange'] }
export const Input = ( { onChange }:Props ) => {

This approach ensures that if you're 3rd party package type signature changes you still have the same precise type defined in your props

Upvotes: 1

Related Questions