input's event.target is null within this.setState [React.js]
The setState
function is executed in asynchronous context.
By the time the state is updated the e.target
reference might or might not be gone.
const file = e.target.files[0];
can be used to "remember" the value as in your example.
What is the reason for calling setState
with callback ? this.setState({ file: e.target.files[0] })
should do the job.
In your code you are referring to a synthetic event object which no longer holds information about the original DOM event. React reuses the event objects for performance reasons.
Alternatively you can use:
let file = e.target.files[0];
const files = e.target.files
this.setState(() => ({ file: files[0] })); //doesnt work
React uses event pooling, you can read more about it in the docs here https://reactjs.org/docs/events.html
setState is an asynchronous function
this.setState(() => ({ file })); // is correct