It’s difficult to help without a working example somewhere on Codepen or Codesandbox, and you haven’t included all relevant parts of the code. Have you tried anything to debug?
does the event fire?
if it fires, are the values for event.target.files[0] and event.target.files[0].name what they should be?
it’s been a while since I used context, onFileChange is the function that updates the Provider state? Does it update correctly?
How am I supposed to debug that, from carefully reading every single line (twice)? You have a lot of async stuff involved, I have no idea what’s happening with your code at any given time.
I hope you’re lucky and someone with a better eye and more time will check if something doesn’t look right. Meanwhile, have you made any attempts to debug this yourself?
The thing about React is that you have to get a feeling for where and when you log. In a component that receives stuff from a parent component, I always log right before the render method. At that point, I can be fairly certain that I get a fresh, updated value. That’s where you’d log the values that your Context.Consumer receives.
Your Provider sets this state: selectedFileName: event.target.files[0].name. In that case, you want to know what the value is when this.setState happens, so you would log that inside the onFileChange handler, right before you actually set state.
You’ll find that event.target.files[0].name is a String, containing the file name.
The value of your Provider is this.state.selectedFileName.data. But there’s no .data property on a String, so the value is undefined.
I can’t help you further without a working demo. You’ll have to learn how to debug your own code.
Thanks a lot for your help. I will do this and return the result tomorrow. But I have tested the this.state.selectedFileName at the beginning and the result was the same: null
I don’t know how many times I’ve now said this to you, but a context is a way to store an object. The value of the value prop on the provider has to be an object, with one exception. You cannot store anything else there except null. Strings do not have a property data, so the reason it is null is because the value of "mystring".data is null.
It doesn’t matter how many times you write that code where you try to directly store a string instead of an object, React will not magically change how it works.