Where is my mistake in consuming context in react

JavaScript
#1

Hello,

Where is my mistake in consuming the context?
react dev tools and visual studio shows the: path: value.path,

Here comes the process of creating and providing and consuming the context:

import React from 'react';

const ImageContext = React.createContext()
export default ImageContext;

onFileChangeName = event => {
        this.setState({ selectedFileName: event.target.files[0].name });
    };

return (
            <ImageContext.Provider value={this.onFileChangeName}>
            
            </ImageContext.Provider >

        );

return (
        <ImageContext.Consumer>

            {value => (
       
                    <ImageEditor
                        includeUI={{

                            loadImage: {
                                path: value.path,
                                name: value,
                            },
                            
        </ImageContext.Consumer>
    );
   
}

Please inform me.

thanks,
Saeed

#2

I don’t know much about React Context, but in your last codeblock, I see four opening curly braces and only one that’s closing. Have you checked the console for an error?

#3 
onFileChangeName = event => {
  this.setState({
    selectedFileName: event.target.files[0].name
  });
};

This is a function.

The value of the prop value has to be an object. As in the thing in the curly brackets after value=, as in value={THIS_THING_HERE_HAS_TO_BE_AN_OBJECT}

return (
                              THIS IS NOT AN OBJECT
                                        ↓
  <ImageContext.Provider value={this.onFileChangeName}>
                                        ↑
                       THIS THING NEEDS TO BE AN OBJECT
return (
            { ... and whatever is being rendered here needs to go here, it's a component }
  </ImageContext.Provider >
);

You asked about this in your last thread, and what you’ve posted here seems to be exactly the same code, with the same errors, with no changes made whatsoever. You really need to go through the React tutorial on the React website at the very least. As React has only a small API and is mainly via just JS + JSX, you also need a good understanding of both of those things, which as things stand I’m not sure that you have.

Context gives you two components:

  1. a <Provider>) that you can store an object in. Then you can access that object further down the component tree using
  2. a <Consumer> (or in a function component, via the useContext hook).

So for example:

const ExampleContext = React.createContext(null);

const App = () => (
  <ExampleContext.Provider value={{ foo: 1, bar: 2 }}>
    <OtherComponent>
      <AnotherComponent>
        <AndAnotherComponent />
      <AnotherComponent>
    </OtherComponent>
  </ExampleContext.Provider>
);

const AndAnotherComponent = () => (
  <ExampleContext.Consumer>
    { (value) => <p>Foo is {value.foo}, Bar is {value.bar})</p> }
  </ExampleContext.Consumer>
);

Then the ImageEditor is missing closing braces, both curly and />, as @jsdisco says. That in particular will immediately throw an error in the console because it’s clearly wrong

#4

Yes, you are right. I understood what you say.
I deleted some sections here to make the code smaller.