Passing value from lightbox to parent

Question

I am creating a profile screen for user in my apps . I am using lightbox from React-Native-Navigation by wix to perform an edit profile . So , the user will click the touchableopacity and a lightbox will pop up and the user will enter the new information and save it . So, im wonder is it possible if i want to pass the textinput value from lightbox to the parent(profile.js) so that i can setstate in the profile.js ?

score 1 · Answer 1 · answered Jun 01 '18 at 09:33

Yes this is possible. You will need to send the data as props to the parent. If you haven't done it before it might feel a bit tricky but you'll get there.

From the parent:

<LightboxComponent 
  userData={this.handleUserData(data)}
/>

handleUserData(data) {
  /* Do something with the data here */
}

From the child:

To send the data you need to set an onChange event or similar on the input you want to capture, like this:

<input name="user-name" onChange={ (e) => this.props.userData(e.target.value) }

This will make the input data from the child get sent to the parent. Every change will trigger a re-render of the affected components.

If your app complains about not being able to setState correctly, then you need to bind this in the parents constructor like this:

this.handleUserData = this.handleUserData.bind(this);

Hi , thanks for the reply . I am using this code to start a lightBox: Navigation.showLightBox({ screen: 'TFH.EditBox', passProps: { type:"Email", value:this.state.profile.email }, — Hafizi, Jun 01 '18 at 09:36

score 0 · Answer 2 · answered Jun 03 '18 at 04:09

I would also say pass the parent's function pointer to the child as props (as seen on the React site). Although some people opt for using an event emitter. I'm actually really curious about more developers' opinions on that.

Is derailing a thread on StackOverflow grounds for epic down voting?

Passing value from lightbox to parent

2 Answers2