Sallu Sallu - 3 years ago 150
Javascript Question

ReactJS Skylight Modal - Hiding modal upon click on button from child component

I have Skylight modal. It use to work fine. But recently it has stopped working.

I open a dialog box using Skylight modal from parent component and in it users can make selection and upon click of button Skylight must close.

Issue is that Skylight object gets undefined in the child component (I am printing using console.log) and therefore any hide() function fails on it.

Please help

Parent Component

class BowlingAddBowler extends Component {

handleClick() {
this.dialogAddBowler.show();
console.log('Print Skylight object', this.dialogAddBowler);
}

handleClose() {
this.dialogAddBowler.hide();
}

render() {

return (
<div className="row">
<div className="col-xs-12">
<button className="btn" onClick={this.handleClick.bind(this)}>No Bowler Selected. Click To Select</button>
</div>
<SkyLight dialogStyles={skylightStyles.dialogStyles} titleStyle={skylightStyles.titleStyle} hideOnOverlayClicked
ref={ref => this.dialogAddBowler = ref} title="Select a new bowler">
<BowlingAddBowlerDialog refs={this.refs} parentClose={this.handleClose} skylight={this.dialogAddBowler} />
</SkyLight>
</div>
)

}
}

BowlingAddBowler.contextTypes = {
store: PropTypes.object
}

export default BowlingAddBowler;


Child Component

class BowlingAddBowlerDialog extends Component {

constructor(props, context) {
super(props, context);

this.handleSubmit = this.handleSubmit.bind(this);

}

componentWillReceiveProps(nextProps, nextState) {
this.currState = nextState.store.getState();
}


/**
* This function submits action to the store to add new bowler
*
* @param event
*/
handleSubmit(event) {
event.preventDefault();

console.log('Skylight', this.props.skylight);

this.props.parentClose();
}

render() {

return (
<div>
<form onSubmit={this.handleSubmit}>

<!-- Form fields are here -->

<div className="form-group text-right">
<button type="submit" className="btn btn-primary">&nbsp;&nbsp;Save&nbsp;&nbsp;</button>
</div>
</form>
</div>
);
}
}

BowlingAddBowlerDialog.contextTypes = {
store: PropTypes.object
}

export default BowlingAddBowlerDialog;


The console.log is

----------handleClick----------
BowlingAddBowler.js:12 SkyLight {props: {…}, context: {…}, refs: {…}, updater: {…}, state: {…}, …}


----------handleSubmit----------
BowlingAddBowlerDialog.js:61 ParentClose ƒ handleClose() {
console.log(this.dialogAddBowler);
this.dialogAddBowler.hide();
}
BowlingAddBowlerDialog.js:62 Skylight undefined
BowlingAddBowler.js:16 undefined


BowlingAddBowler.js:17 Uncaught TypeError: Cannot read property 'hide' of undefined
at Object.handleClose [as parentClose] (BowlingAddBowler.js:17)
at BowlingAddBowlerDialog.handleSubmit (BowlingAddBowlerDialog.js:63)
at Object.ReactErrorUtils.invokeGuardedCallback (ReactErrorUtils.js:69)
at executeDispatch (EventPluginUtils.js:85)
at Object.executeDispatchesInOrder (EventPluginUtils.js:108)
at executeDispatchesAndRelease (EventPluginHub.js:43)
at executeDispatchesAndReleaseTopLevel (EventPluginHub.js:54)
at Array.forEach (<anonymous>)
at forEachAccumulated (forEachAccumulated.js:24)
at Object.processEventQueue (EventPluginHub.js:254)
at runEventQueueInBatch (ReactEventEmitterMixin.js:17)
at Object.handleTopLevel [as _handleTopLevel] (ReactEventEmitterMixin.js:27)
at handleTopLevelImpl (ReactEventListener.js:72)
at ReactDefaultBatchingStrategyTransaction.perform (Transaction.js:143)
at Object.batchedUpdates (ReactDefaultBatchingStrategy.js:62)
at Object.batchedUpdates (ReactUpdates.js:97)
at dispatchEvent (ReactEventListener.js:147)
handleClose @ BowlingAddBowler.js:17
handleSubmit @ BowlingAddBowlerDialog.js:63
ReactErrorUtils.invokeGuardedCallback @ ReactErrorUtils.js:69
executeDispatch @ EventPluginUtils.js:85
executeDispatchesInOrder @ EventPluginUtils.js:108
executeDispatchesAndRelease @ EventPluginHub.js:43
executeDispatchesAndReleaseTopLevel @ EventPluginHub.js:54
forEachAccumulated @ forEachAccumulated.js:24
processEventQueue @ EventPluginHub.js:254
runEventQueueInBatch @ ReactEventEmitterMixin.js:17
handleTopLevel @ ReactEventEmitterMixin.js:27
handleTopLevelImpl @ ReactEventListener.js:72
perform @ Transaction.js:143
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:97
dispatchEvent @ ReactEventListener.js:147

Answer Source

You need to bind this.handleClose to this object

<BowlingAddBowlerDialog refs={this.refs} parentClose={this.handleClose.bind(this)} skylight={this.dialogAddBowler} />

not sure about if you need to bind skylight={this.dialogAddBowler} as well?

skylight={this.dialogAddBowler.bind(this)}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download