cannot set property of undefined TypeScript/React

Question

I have a dropdown that I want to use to set a category and then save to my files page. Files is in an array of the Well interface. When I got to change the value, i get back this error:

TypeError: Cannot set properties of undefined (setting 'category')


   src/Components/Main/WellWorkflow/WellFiles/WellFiles.tsx:181
      178 | 
      179 | private handleInputChange = (index: number) => (event: any) => {
      180 |   const well = this.state.well;
    > 181 |   well.files[index].category = event.target.value;
      182 |   console.log(well);
      183 |   this.setState({
      184 |     well

Here is my code

private handleInputChange = (index: number) => (event: any) => {
  const well = this.state.well;
  well.files[index].category = event.target.value;
  console.log(well);
  this.setState({
    well
    });
}

public renderDropdown = () => (category: string, index: number) => {
    return (
        <FormGroup >
            <EInput
                type="select"
                name="Category"
                value={this.fileCategory.category}
                onChange={this.handleInputChange(index)}
            >
                <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(),
                sortItem: 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',
            },
        ];

    });

I have done this other areas of the code but those go directly to the interface whereas well.files represents files: IAttachedFile [] as seen here:

What is well.files[index] expected to be? It sounds like the index of that array you are requesting hasn't been set. — DBS
– DBS, Commented Nov 11, 2021 at 14:40
I thought about that too but I am not sure how to set it.. well.files[index] represents IAttachedFile and then .category is showing up like it should and when you go to the definition, it will take you straight to IAttachedFile.category.. ill post some pics above to show you more. — Matthew Lemke
– Matthew Lemke, Commented Nov 11, 2021 at 14:53
well.files[index] is undefined when that code is hit. This is fact based on the error. Either well.files does not have any or all of the data yet at that time, or index is coming out of bounds for well.files. — crashmstr
– crashmstr, Commented Nov 11, 2021 at 15:05

Pad · Accepted Answer · 2021-11-11 16:00:08Z

1

Try making some form of check to see if there is an object at specific index eg:

private handleInputChange = (index: number) => (event: any) => {
  const well = this.state.well;
  if(well.files[index]){
    well.files[index].category = event.target.value;
    console.log(well);
    this.setState({
     well
    });
  }
}

answered Nov 11, 2021 at 16:00

Pad

1844 bronze badges

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

Comments

Baka · Accepted Answer · 2021-11-12 12:50:33Z

0

As was mentioned in the comments, well.files[index].category is probably undefined

If your version of TS is 4.1 or higher you can enable noUncheckedIndexedAccess option in tsconfig.json, then result of value accessed by index will be T | undefined for non-const arrays

Documentation on --noUncheckedIndexedAccess

answered Nov 12, 2021 at 12:50

Baka

1466 bronze badges

Collectives™ on Stack Overflow

cannot set property of undefined TypeScript/React

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related