Get Value From Textinput And Pass To Grandparent And To The Child React Native

I'm new to react-native my component structure goes like this MainScreen > LoginScreen > Form > UserInput > ButtonSubmit each one

Solution 1:

Lets take the simple case of a parent component and one child component (lets say it is a n input field).

You have two options for handling the state: (1) All state in the parent component. The parent component passes as a prop, to the child component, a callback. Once the input in the child component is changed, the callback is called. Since it is in the parent component, the parent component can update the state. (2) Using redux store and accessing it from multiple components.

Solution 2:

You can achieve this using redux which is a predictable state container for javascript app , In redux we can create global state for the app and create action to change the state , It might take a while to wrap your head around it but it is sure a huge bonus to know redux.

follow this link to get a start https://redux.js.org/basics/usage-with-react

Solution 3:

In React the child components cannot send back values to parent components unless explicitly allowed to do so. You can just pass down a callback to child component and handle the input.

OR

What you can do is you can use redux-form if you are using redux for your state management.

Here is the example, passing down callback to the child

classParentextendsComponent {
  constructor() {
    this.state = {
      value: ''
    };
  }

  //...

  handleChangeValue = e =>this.setState({value: e.target.value});

  //...render() {
    return (
      <Childvalue={this.state.value}onChangeValue={this.handleChangeValue}
      />
    );
  }
}

classChildextendsComponent {
  //...render() {
    return (
      <inputtype="text"value={this.props.value}onChange={this.props.onChangeValue}
      />
    );
  }
}