How to transfer input field data from modal to container in reaction-root mode?

Question

Here is what I use:

<Modal
    visible = {this.props.visible}
    animationType="slide"
    transparent
    onRequestClose={() => {}} >
         <TextInput 
           style = {styles.inputBox}
           ref = {this.props.destinatinon} />
   </Modal>

and in the container

 <ExampleModal
       destination = {this.state.destination} >
     </ExampleModal>

I do not know how to transfer data from a modal to a parent component. Any tutorial or link is fine. Thanks at Advance.

Answer 1

Suppose your modal is stored separately in /components/MyModalto summarize things.

You can make your Modal call a function that you passed to the details every time the input text changes. Here you can use simple callback logic.

Avoid using links as much as possible.

import MyModal from '../components/MyModal';
...
class Home extends Component {
  onInputChanged = (changedText) => {
    console.log('This is the changed text: ', changedText);
  }

  render() {
    return (
      <View>
        ...
        <MyModal onInputChanged={this.onInputChanged} .../>
      </View>
    )
  }
}

// components folder
class MyModal extends Component {
  render() {
    return (
      <Modal
        visible = {this.props.visible}
        animationType="slide"
        transparent
        onRequestClose={() => {}} >
           <TextInput 
             style = {styles.inputBox}
             onChangeText={(changedText) => this.props.onInputChanged(changedText)} />
      </Modal>
    )
  }
}

: MyModal stateless, .