'abortListening' or 'stopListening' not working

[QishengLi]

Hi I am new to React and trying to use react-speech-recognition. I am trying to start & stop listening to the microphone by click buttons. However, it seems that it's still listening after I click 'stop' button and the transcription is still updating.

Attaching the code here. Any advice will be helpful!

import React, { PropTypes, Component } from 'react'
import SpeechRecognition from 'react-speech-recognition'

const propTypes = {
  // Props injected by SpeechRecognition
  transcript: PropTypes.string,
  finalTranscript: PropTypes.string,
  startListening: PropTypes.func,
  abortListening: PropTypes.func,
  resetTranscript: PropTypes.func,
  browserSupportsSpeechRecognition: PropTypes.bool
}

const options = {
  autoStart: false
}

class Dictaphone extends Component {

  render() {
    const { 
      transcript, 
      finalTranscript,
      startListening, 
      abortListening, 
      resetTranscript, 
      browserSupportsSpeechRecognition 
    } = this.props

    if (!browserSupportsSpeechRecognition) {
      return null
    }

    return (
      <div>
        <button onClick={startListening}>Start</button>
        <button onClick={abortListening}>Stop</button>
        <button onClick={resetTranscript}>Reset</button>
        <p>{finalTranscript}</p>
      </div>
    )
  }
}

Dictaphone.propTypes = propTypes

export default SpeechRecognition(options)(Dictaphone)

(Sorry for the bad formatting!)

[JamesBrill]

Hi Qisheng, I have been unable to reproduce your issue - using your exact code, stopListening and abortListening work correctly for me.

Some questions:

• Which browser are you using?
• Which version of react-speech-recognition are you using?
• How is the parent component rendering your Dictaphone? Is it being rendered multiple times? It would be useful to see the parent component's render function (where you write <Dictaphone />).

Some tips:

• You should only need the transcript prop - this is the most complete version of the transcript. finalTranscript only includes text that the speech recognition algorithm has finished processing and will be slower to render.
• To show a block of code on Github, put three backticks before and after it on separate lines like this:
  ``` ````

[QishengLi]

Thank you a lot, James! I figured it out that the reason was Dictaphonebeing rendered multiple times.