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"> Save </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
Recommended for you: Get network issues from WhatsUp Gold. Not end users.
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