how to make a callback in reactnative

Question

I have a dialog box that I want to present. I need an arrow function that allows me to call the callback prop that I have written as well as close the modal screen by the use of state. I am able to close it but not invoke the callbacks from the parent component

  export class DialogBox extends PureComponent {
  okButton = <Button type="text" title={t('action')} onPress={this.onOkPressed} />

  cancelButton = <Button type="text" title={t('cancel')} onPress={this.onCancelPressed} />

  confirmButtonBox = (
    <Fragment>
      {this.cancelButton}
      {this.okButton}
    </Fragment>
  )

  state = {
    isVisible: this.props.isVisible,
  }

  onModalClose = () => {
    this.setIsVisible(false)
  }

  onOkPressed = () => {
    this.props.onOkPress()
    this.onModalClose()
  }

  onCancelPressed = () => {
    this.props.onCancelPress()
    this.onModalClose()
  }

  setIsVisible (visible) {
    this.setState({ isVisible: visible })
  }

  renderButtons (type) {
    switch (type) {
      case 'confirm':
        return this.confirmButtonBox
      case 'alert':
        return this.okButton
      default:
        return this.okButton
    }
  }

  render () {
    const {
      title, message, type,
    } = this.props

    return (
      <Modal transparent animationType="fade" visible={this.state.isVisible}>
        <View style={styles.container}>
          <View style={styles.alertContainer}>
            <View>
              <Text>
                <H3 style={{ fontWeight: 'bold' }}>
                  {title}
                </H3>
              </Text>
              <Text>
                {message}
              </Text>
            </View>
            <View style={styles.buttons}>
              {this.renderButtons(type)}
            </View>
          </View>
        </View>
      </Modal>
    )
  }
}

The way I need it to work is:

I have a container class external to this component which allows user to implement a callback method on Ok press and onCancle press.

   class DialogBoxStoryContainer extends PureComponent {
  // state = { isVisible: false, type: 'confirm' }

  onOkPressed = () => {
    // this.setState({ isVisible: false })
    console.debug('on ok pressed')
  }

  onCancelPressed = () => {
    // this.setState({ isVisible: false })
    console.debug('on cancel pressed')
  }

  render () {
    return (
      <View>
        <DialogBox
          {...this.props}
          onOkPress={this.onOkPressed}
          onCancelPress={this.onCancelPressed}
          isVisible="true"
          type="confirm"
        />

I do not see the callbacks being executed here. What am i missing here?

Answer 1

Your code works for me. If your "Default Levels" in Chrome (I assume you are using Chrome) is not set for "Verbose", you can't see console.debug outputs. I don't know where this config is in Firefox or other browsers. So, if you are using another one just find this setting.