TypeError: Cannot read properties of undefined (reading 'target') (Typscript/React)

Question

I am needing help with a simple dropdown menu. I am trying to render this dropdown, then take the value of the input and put it in the database. However I get this error every single time. Any clues as to why?

Here is the file and how I am trying to render it. The error pops up on the handleInputChange function.

 public state = {
    isDirty: false,
    selectedFile: [] as any[],
    well: new IWell(),
    wellId: this.props.match.params.wellId,
    wellPageTitle: 'New Well'
};

constructor(props: any) {
    super(props);

    this.WellsStore = this.props.stores.WellsStore;
    this.MessageStore = props.stores.MessageStore;
    this.params = this.props.match.params;
    this.handleInputChange = this.handleInputChange.bind(this);
}


private handleInputChange(event: any) {
    const category = this.state.well.files;
    category[event.target.name] = event.target.value;
    this.setState({
        category,
    });
}

public renderDropdown = (category: any) => () => {
    return(
        <FormGroup >
        <EInput
        type="select"
        name="category"
        id="category"
        value={this.state.well.files}
        onChange={this.handleInputChange(category)}
    >
        <option value=""/>
        <option value="Not Categorized">Not Categorized</option>
        <option value="Signed Documents">Signed Documents</option>
        <option value="Unsigned Documents">Unsigned Documents</option>
        <option value="3rd Party Documents">3rd Party Documents</option>
        <option value="General Well Info">General Well Info</option>
    </EInput>
    </FormGroup>
    );
}


private formatWellFiles = () => {
    const files = this.state.well.files;
    const headers = [
        "File Name",
        "Category",
        "Size",
        "Uploaded By",
        "Upload Date",
        "Download",
    ];
    const rows = files.map(f => {
        return [
            {
                content: f.name
            },
            {
                content: this.renderDropdown(f.category),
                type:'render'
            },
            {
                content: this.renderSize(f.size),
                sortItem: Number(f.size),
                type: 'render'
            },
            {
                content: f.createUser
            },
            {
                content: f.createDate
            },
            {
                content: this.renderDownload(f),
                type: 'render',
            },
        ];

    });

    return { headers, rows };
}

Answer 1

Change this line:

onChange={this.handleInputChange(category)}

to:

onChange={this.handleInputChange.bind(this)}