Reactjs – Property ‘value’ does not exist on ‘EventTarget’ in TypeScript

eventsreactjstypescript

The following code in TypeScript with React is outputting the following error.

Property 'value' does not exist on type 'EventTarget'.

import React, { Component } from 'react';

class InputForm extends React.Component<any ,any> {
  state = {
    userInput: ''
  };

  handleUserInput = (e: React.FormEvent<HTMLInputElement>): void => {
    this.setState({
      userInput: e.target.value
    });
  }

  // Working code from 42081549
  // Not relevant to this project
  update = (e: React.FormEvent<HTMLInputElement>): void => {
    this.props.login[e.currentTarget.name] = e.currentTarget.value
  }

  submitMessage = (e: React.FormEvent<HTMLFormElement>): void => {
    e.preventDefault();
    this.props.sendUserMessage(this.state.userInput)
  }

  render() {
    return (
      <form className="chat-input-form" onSubmit={this.submitMessage}>
        <input value={this.state.userInput} onChange={this.handleUserInput}/>
        <button type="submit" />
      </form>
    );
  }

}

export default InputForm;

I am currently using:

  • "@types/react": "^16.0.40",

  • "react": "^16.2.0",

  • "typescript": "^2.7.2",

This could be considered a follow-up to Typescript: React event types however it is not a duplicate as working code provided in by Nitzan Tomer in this answer is currently not working in my specific use case.

EDIT As mentioned above, NOT a duplicate of Typescript: React event types, the solution provided in that question is not working in this case, and therefore could be a different cause.

My tsconfig.json file is as follows:

{
  "compilerOptions": {
    "target": "es5",                          
    "module": "commonjs", 
    "lib": ["esnext", "dom"],
    "jsx": "react",                           
    "sourceMap": true,                        
    "outDir": "./dist/",                      
    "strict": true,                        
    "noImplicitAny": true,                   
    "esModuleInterop": true                 
  }
}

Best Answer

The problem is that you're using e.target.value instead of e.currentTarget.value.

As you can see in the definition file:

interface SyntheticEvent<T> {
    ...
    currentTarget: EventTarget & T;
    ...
    target: EventTarget;
    ...
}