How to pass data from bottom to top using React's Context API?

Question

JavaScript

Hey!
I'm trying to implement Context Api in my project. And now I'm trying to understand: is it possible to pass data from bottom to top , i.e. from child components to parent or from Consumers to Provider ?
Example:
React.createContext

export const eventData = {
  topic: "defaultTopic",
};

export const CreateEventFormContext = React.createContext(eventData);

There is a typical input for entering text. has not yet been used valueFromProviderin any way. ConsumerBut I want to pass an attribute value valuethat changes dynamically using handleChangein Provider. Well, then from ProviderI plan to transfer data to ControlForm.jsx and from there I will send an array of data to the database.
CreateEventFormConsumer

...
  handleChange(event) {
    this.setState({ value: event.target.value });
  }
...
  <CreateEventFormContext.Consumer>
     {valueFromProvider => (
         <input type="text" value={this.state.value} onChange={this.handleChange} />
     )}
  </CreateEventFormContext.Consumer>

CreateEventFormProvider

<CreateEventFormContext.Provider value="HELLO WORLD">
            <Topic />
      </CreateEventFormContext.Provider>

So I passed the string HELLO WORLDto valueFromProviderin my Consumer. But how can I do the same in reverse? When I started to delve into it, Context ApiI thought that this would save me from callbacks, but so far, apart from the callback, I don’t see any other option to transfer data up.
How to pass data from bottom to top using React Context API?

Answer 1

The Context API is used to pass context, not to manage state. Read about Redux .

Answer 2

Centext Api is a little bit different. Just throw the method inside:
and already in the parent component, where you declared it, catch value:
handleChange = (e) => e.target.value;