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

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 }) }

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

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

Collectives™ on Stack Overflow

React JS is not changing state after event inside FileReader

2 Answers 2

1 Comment

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Related