"TypeError: Cannot read property 'state' of undefined"

Question

I am trying to upload a file in reactjs, I want to display in the console, but when I click on upload button it gives me

"TypeError: Cannot read property 'state' of undefined"

Here is my code:

constructor(props) {
        super(props);

this.state = {
  selectedFile: null
};

this.fileSelectedHandler = this.fileSelectedHandler.bind(this);
}

fileSelectedHandler(event) {
  this.setState({
    selectedFile: event.target.files[0]
  })
}

handleUpload() {
  console.log(this.state.selectedFile)
}
render() {
 return (
    <div class="group">
      <input type="file" name="file" id="file" onChange={this.fileSelectedHandler} />
      <button onClick={this.handleUpload}> Upload </button>
    </div>
    )
}

I am getting the error at: console.log(this.state.selectedFile)

You have to bind `handleUpload` to `this` in the constructor the same way you do with your `fileSelectedHandler` method. — Tholle, Feb 23 '19 at 19:05
Are you calling the constructor function and super method before you declare the state? — Nick, Feb 23 '19 at 19:09
you sloppy copy-pasted your code with just half of constructor — Tomas, Feb 23 '19 at 19:15
Okay, guys, I made an update I forgot to put constructor function and super method, now I have updated the code. — Nirav Panchal, Feb 23 '19 at 19:41

score 1 · Answer 1 · answered Feb 23 '19 at 19:06

1

There are two ways to fix this either bind handleUpload to the correct this content or define your function in below format

handleUpload = () => {
console.log(this.state.selectedFile)
}

answered Feb 23 '19 at 19:06

Karan Garg

1,083
10
9

Thanks, bro it worked! – Nirav Panchal Feb 23 '19 at 19:09

"TypeError: Cannot read property 'state' of undefined"

1 Answers1