this.setState is not a function for a File Upload ReactJS

Question

I know this question has been asked several times, however I went over the answers and I could not find a resolution to my problem.

I have a very basic class component that is just loading an external HTML file and reading its contents, however for some reason I am getting this.setState is not a function after the actual HTML is loaded, and I cannot figure out why yet.

This is my code:-

import React from "react";

class ReadHtml extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            innerText: ''
        };
        this.handleFileSelect = this.handleFileSelect.bind(this);
      }


    handleFileSelect = (evt) => {
        evt.preventDefault();
        var file = evt.target.files[0]; // File inputs are an array - get the first element
        var reader = new FileReader();

        reader.onload = function(e) {
          // Render the supplied file
          document.getElementById('displayPage').innerHTML = e.target.result;
          this.setState({
              innerText: e.target.result
          });
        };

        // Read in the HTML file.
        reader.readAsText(file);
      };

    render() {
        return (
          <div>
            Select a file : <input type="file" onChange={(e) => this.handleFileSelect(e)} /><br/><br/>
            <div id="displayPage">Display the Html Page here</div>
          </div>
        )
      }

}

export default ReadHtml;

Any help will be really very much appreciated!

atadnmz · Accepted Answer · 2020-02-10 11:47:12Z

2

there is a scope issue you can try this code. Or you can bind the function.

reader.onload = (e) =>{
      // Render the supplied file
      document.getElementById('displayPage').innerHTML = e.target.result;
      this.setState({
          innerText: e.target.result
      });
    };

answered Feb 10, 2020 at 11:47

atadnmz

3112 silver badges14 bronze badges

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

Comments

TBouder · Accepted Answer · 2020-02-10 11:48:32Z

1

You could try to change your handleFileSelect function with this :

    handleFileSelect = (evt) => {
        evt.preventDefault();
        var file = evt.target.files[0];
        var reader = new FileReader();

        reader.onload = (e) => { //CHANGES
          document.getElementById('displayPage').innerHTML = e.target.result;
          this.setState({
              innerText: e.target.result
          });
        };

        // Read in the HTML file.
        reader.readAsText(file);
      };

Basically, when you are creating a new function (here your reader.onload = function()), the this is bind to this function. With the arrow functions, the this stays with your React Class

answered Feb 10, 2020 at 11:48

TBouder

2,7492 gold badges16 silver badges29 bronze badges

Collectives™ on Stack Overflow

this.setState is not a function for a File Upload ReactJS

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