React JS is not changing state after event inside FileReader

Question

I've been trying to assign as a state the contents of a .txt file uploaded locally via an input tag. I used File Reader, however although the content of the files is printed, the state is not changed according to React dev tools.

Here's the code:

handleFile = (file) => {
var fileReader = new FileReader()
fileReader.readAsText(file)
fileReader.onloadend = function (e) {
  var content = e.target.result
  console.log(content)
  this.setState={
    text: content
  }

}

The function handleFile is being called here:

<input type="file" accept='.txt' className="custom-file-input" id="customFile"
onChange={e => this.handleFile(e.target.files[0])} />

Thanks a lot

tip: content = await file.text()

Endless
– Endless

2020-05-03 16:15:19 +00:00
Commented May 3, 2020 at 16:15 — Endless
– Endless, Commented May 3, 2020 at 16:15

Александр Чернобай · Accepted Answer · 2020-05-03 10:31:36Z

2

setState is a method, so to use it you should type something like:

this.setState({key:value})

but it wouldn't work, couse "this" in your code is link to fileReader - and you need React. Try to use arrow function to throw correct "this":

fileReader.onloadend = (e)=> {
var content = e.target.result
console.log(content)
this.setState({
  text: content
})
}

answered May 3, 2020 at 10:31

Александр Чернобай

1994 bronze badges

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

1 Comment

Francisco Molina Over a year ago

Thanks a lot, didn't notice the error while calling setState, also thanks for explaining the context of this!

MD10 · Accepted Answer · 2020-05-03 10:28:51Z

0

try this.setState({ text: content }) without the = also use arrow function because this is not recognized in regular functions

answered May 3, 2020 at 10:28

MD10

1,6034 gold badges20 silver badges40 bronze badges

Collectives™ on Stack Overflow

React JS is not changing state after event inside FileReader

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related