I have a react application that looks like this: I have a button when it's clicked it will open a popup with a ticket to be printed, the click handler is passed from a parent ponent to the button and I want the same process to be done inside the parent ponent

export default class ParentComponent extends Component {
  openWindow = id => {
    window.open('/service/ticket/' + id + '/print')
  }

  submitPayment = () => {
    sendPayment(this.state.rawCommand.id, updatedCommand.payment) 
      .then(payment => {
        if (payment.needed > 0) { 
          toastr.success(dictionnary.acceptedPayment)
        } else {
          toastr.success(dictionnary.payee) 
          this.openWindow(updatedCommand.id)
        } 
      }

  render () {
    <Printer printTicket={this.openWindow} />
  }
}

and

const Printer = ({printTicket, id}) => {
  const clickHandler = () => printTicket(id)

  return (
    <button onClick={clickHandler}>print</button>
  )
}

The problem is when the button in the Printer ponent is clicked the window is opened as expected, but when the openWindow click handler is invoked from the parent ponent nothing is happening!

I inspected the code in chrome devtools and the function is invoked but the popup does not open.

Edit More explanation: 1- the button opens a popup with a ticket and print it 2- the user can print a ticket via this button 3- after submitting a payment the ticket should be printed automaticaly

I have a react application that looks like this: I have a button when it's clicked it will open a popup with a ticket to be printed, the click handler is passed from a parent ponent to the button and I want the same process to be done inside the parent ponent

export default class ParentComponent extends Component {
  openWindow = id => {
    window.open('/service/ticket/' + id + '/print')
  }

  submitPayment = () => {
    sendPayment(this.state.rawCommand.id, updatedCommand.payment) 
      .then(payment => {
        if (payment.needed > 0) { 
          toastr.success(dictionnary.acceptedPayment)
        } else {
          toastr.success(dictionnary.payee) 
          this.openWindow(updatedCommand.id)
        } 
      }

  render () {
    <Printer printTicket={this.openWindow} />
  }
}

and

const Printer = ({printTicket, id}) => {
  const clickHandler = () => printTicket(id)

  return (
    <button onClick={clickHandler}>print</button>
  )
}

The problem is when the button in the Printer ponent is clicked the window is opened as expected, but when the openWindow click handler is invoked from the parent ponent nothing is happening!

I inspected the code in chrome devtools and the function is invoked but the popup does not open.

Edit More explanation: 1- the button opens a popup with a ticket and print it 2- the user can print a ticket via this button 3- after submitting a payment the ticket should be printed automaticaly

• javascript
• reactjs
• dom-events

• I'd expect to see a ReferenceError for mandId on the console with that code. – Quentin Commented Apr 21, 2017 at 9:24
• it's a typo in the question only thank you! – zied hajsalah Commented Apr 21, 2017 at 9:26
• How are you invoking submitPayment? – Pineda Commented Apr 21, 2017 at 9:28
• submitPayment is passed as props to another ponent and when it's invoked it does an ajax call which returns a Promise, and when the Promise is resolved it calls this.openWindow. – zied hajsalah Commented Apr 21, 2017 at 9:31
• 'but when the openWindow click handler is invoked from the parent ponent nothing is happening', where is the code that invoked it within the parent and not a child ponent? – Pineda Commented Apr 21, 2017 at 9:46

1 Answer 1

I found the solution it's about google chrome: it blocks the popup!!!