VoiceRecognition.js:50 Uncaught TypeError: Cannot read property 'onResult' of undefined at SpeechRecognition.bindResult (VoiceRecognition.js:50)

[annaStarshotsoftware]

Hi!
I'm testing your module in my react app and the problem is that it not catch the onResult prop.
I have to take a look at your example, but it's strange with the storybook.
Can you do one without that? It would be better for the people that are a beginner with React JS
like me...

Here is my code:

import React, { Component } from 'react';
import { VoiceRecognition } from 'react-voice-components';
import '../../node_modules/bootstrap/dist/css/bootstrap.min.css';
import micro from '../img/micro_icon.png';
import './css/Micro.css';

class Micro extends Component {

  state = {
    listen: false,
    start: false,
    stop: true
  };

  listen = () => {
    this.setState({ listen: true, start: true, stop: false  })
  }

  onEnd = () => {
    this.setState({ listen: false, start: false, stop: true })
  }

  onResult = ({ finalTranscript }) => {
    const result = finalTranscript
    this.setState({ start: false })

    alert(result)
  }

  render() {
    return (
      <div className="row justify-content-center">
        <div>
          <button>
            {
              this.state.listen
              ?
              <div id="wave">
                <span className="dot"></span>
                <span className="dot"></span>
                <span className="dot"></span>
                <VoiceRecognition
                  onEnd={this.onEnd}
                  onResult={this.onResult}
                  continuous={true}
                  lang="es-ES"
                  stop={this.state.stop}
                />
              </div>
              :
              <img src={micro} onClick={this.listen} className="micro-icon" alt="microphone" />
            }
          </button>
        </div>
      </div>
    );
  }
}

export default Micro;

I wait for your answer. Thaks.

Regards.