Collectives™ on Stack Overflow

Find centralized, trusted content and collaborate around the technologies you use most.

Teams

Q&A for work

Connect and share knowledge within a single location that is structured and easy to search.

I'm building something like this React example in Typescript. The goal is to have a parent that has a state, and it creates several stateless child components that pass their clicks back to the parent.

Since the example is in Javascript I have no idea what the types of the input box events and the onChange handlers are...? I've tried several options like React.MouseEvent<HTMLInputElement> , but that's just guesswork...

Parent component create imageRows and pass the handler:

render() {
    <ImageRow key={el.url} onChange={this.onChange}/>
 // what should the type of e be?
 onChange(e:any){
And the ImageRow component
export interface ImageRowProps { 
  genre: Array<number>
  url: string
  onChange : any // what is the type of the callback function?
export class ImageRow extends React.Component<ImageRowProps> {
  render() {
    return <div className="imagerow">
        <input type="checkbox" key={index} onChange={this.props.onChange} defaultChecked={(num == 1)}/>
The similar question only shows the event type, not the handler type. When I change the event type:
onChange(e: React.FormEvent<HTMLInputElement>){
    console.log(e.target.value)
I get this error:
Property 'value' does not exist on type 'EventTarget'.
                Thanks... that shows the type of the event onChange(e: React.FormEvent<HTMLInputElement>). But I still can't find the type of the change handler in props...
– Kokodoko
                Aug 13, 2017 at 21:58
                Seem like maybe you are using outdated definition files for react? With the newer version it should be something like Property 'value' does not exist on type 'EventTarget & HTMLInputElement'.
– Nitzan Tomer
                Aug 13, 2017 at 22:18
                Hmmm the version seems to be locked? If I update it remains at @types/react": "^15.6.1 but on npm it says the latest version is 16.0.2
– Kokodoko
                Aug 13, 2017 at 22:29
                Maybe your react is also not updated? In any case, if you have the old version of the definitions then check out the 2nd answer in the question which is marked is duplicated. I'm pretty sure that it will solve your problem, please update if it worked for you so I'll close this one as duplicated
– Nitzan Tomer
                Aug 13, 2017 at 22:52
                This is the part where I cry in gratitude. No more dredging through opaque documentation.
– Jason
                Dec 14, 2017 at 4:44
                This should be one of the first things you learn when first starting typescript. This would have saved me so much time over the past years. Thanks!
– counterbeing
                Jul 6, 2021 at 20:16
                Where are you seeing this secret tip? PHPStorm doesn't have an option like this as far as I can see.
– Jamie Hutber
                Jul 28, 2021 at 13:34
console.log(event.target.value); // Not Working (Blank value)
console.log(event.target.checked); // Working Fine ( true / false )
//../src/components/testpage2/index.tsx
import * as React from 'react';
import {  TestInput } from '@c2/component-library';
export default class extends React.Component<{}, {}> {
    state = {
                model: {
                    isUserLoggedIn: true
    onInputCheckboxChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        console.log(event.target.value); // Not Working
        console.log(event.target.checked); // Working
        const field = event.target.name;
        const model = this.state.model;      
        model[field] = event.target.checked;
        return this.setState({model: model});
    render() {
        return (
                <TestInput name="isUserLoggedIn" label="Is User LoggedIn : " type="checkbox" onChange={this.onInputCheckboxChange} />
//=============================================================//
import * as React from 'react';
//import * as cs from 'classnames';
export interface TestInputProps extends React.HTMLAttributes<HTMLInputElement> {
    name: string;
    label: string;
    onChange: React.ChangeEventHandler<HTMLInputElement>;
    placeholder?: string;
    value?: string;
    type?: string;
    error?: string;
    className?: string;
export const TestInput : React.SFC<TestInputProps> = ({ name, label, onChange, placeholder, value, type, className, error, ...rest }) => {
    let wrapperClass:string = 'form-group';
    if (error && error.length > 0) {
      wrapperClass += " " + 'has-error';
    return (
        <div className={wrapperClass}>
            <label htmlFor={name}>{label}</label>
            <div className="field">
                <input
                type={type}
                name={name}
                className="form-control"
                placeholder={placeholder}
                value={value}
                onChange={onChange}/>
                {error && <div className="alert alert-danger">{error}</div>}
TestInput.defaultProps ={
    type: "text"
You can use BaseSyntheticEvent as event type as all DOM event in react are not native but Synthetic.
render() {
    <ImageRow key={el.url} onChange={this.onChange}/>
 // BaseSyntheticEvent is better than 'any'
 onChange(e:BaseSyntheticEvent){
Just do this:
onChange = (event: Event) => {
      const { value } = event.target as unknown as { value: boolean, };
      setState(value);
<input type='radio' onChange={this.onChange} />
And the squeegee lines will go away.
        
Thanks for contributing an answer to Stack Overflow!
Please be sure to answer the question. Provide details and share your research!
But avoid …
Asking for help, clarification, or responding to other answers.
Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.