typescript react setState with user input

Question

In this basic example of typescript react (create-react-app) I am trying to change the state.name by a user input.

Could someone show me a working example (which I didn't found) or better: where the documentation is?

The (second) error of the linter is :

(54,24): error TS2322: Type '{ onChange: (e: Event) => void; }' is not assignable to type 'DetailedHTMLProps, HTMLInputElement>'. Type '{ onChange: (e: Event) => void; }' is not assignable to type 'InputHTMLAttributes'. Types of property 'onChange' are incompatible. Type '(e: Event) => void' is not assignable to type 'EventHandler> | undefined'. Type '(e: Event) => void' is not assignable to type 'EventHandler>'. Types of parameters 'e' and 'event' are incompatible. Type 'ChangeEvent' is not assignable to type 'Event'. Property 'cancelBubble' is missing in type 'ChangeEvent'.

import * as React from 'react';
import './Hello.css';

interface Props {
    name: string;
}

interface State {
    name: string;
}

class Hello extends React.Component<Props, State> {

public static defaultProps = {
    name: 'John',
};

constructor(props: Props) {
    super(props);
    this.state = {
        name: props.name,
    };
    this.handleChange = this.handleChange.bind(this);
}

handleChange(e: Event): void {
    this.setState({
        name: e.target.value //Error : property 'value' does not exist on type 'EventTarget'
    });
}

render(): JSX.Element {
    return (
        <div className="hello">
            Hello {this.state.name}
            <input onChange={(e: Event) => this.handleChange(e)} /> //error is at this line
        </div>
      );
   }
}

export default Hello;

Porkopek · Accepted Answer · 2017-10-10 12:01:41Z

13

Change your

handleChange(e: Event)

with

handleChange (e: React.FormEvent<HTMLInputElement>)

and

e.target.name;

with

e.currentTarget.name;

Also, you may want to change

 <input onChange={(e: Event) => this.handleChange(e)} />

with

 <input onChange={this.handleChange} />

answered Oct 10, 2017 at 12:01

Porkopek

1,03212 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

LEMUEL ADANE · Accepted Answer · 2023-01-29 09:33:39Z

-1

Just do this:

handleChange = (event: Event) => {
      const { value } = event.target as unknown as { value: string, };
      this.setState({
        ...this.state,
        name: value.trim()
      });
};
  
<input type='text' onChange={this.handleChange} />

And the squeegee lines will go away.

answered Jan 29, 2023 at 9:33

LEMUEL ADANE

8,90416 gold badges65 silver badges77 bronze badges

Collectives™ on Stack Overflow

typescript react setState with user input

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related