Output to a textbox from a function after calling an API in react

ReactJS
1

I have isolated where the output of the webspeech api goes to, finalTranscript using a console.log. However I am not able to render this in a text input.

I have tried adding it as a value but i require an onchange, Here is a snippet of my react code.

class Speech extends React.Component {
    constructor(props) {
        super(props)

    const SpeechRecognition = window.SpeechRecognition
        || window.webkitSpeechRecognition

    if (SpeechRecognition != null) {
        this.recognition = this.createRecognition(SpeechRecognition)
    } else {
        console.warn('The current browser does not support the SpeechRecognition API.')
    }


}

createRecognition = (SpeechRecognition) => {
    const defaults = {
        continuous: true,
        interimResults: false,
        lang: 'en-GB'
    }
    const options = Object.assign({}, defaults, this.props)

    let recognition = new SpeechRecognition()
    recognition.continuous = options.continuous
    recognition.interimResults = options.interimResults
    recognition.lang = options.lang
    return recognition
}

bindResult = (props, event) => {
     // let interimTranscript = ''
    let finalTranscript = ''

    for (let i = event.resultIndex; i < event.results.length; ++i) {
        // if (event.results[i].isFinal) {
            finalTranscript += event.results[i][0].transcript
        // } else {
        //     interimTranscript += event.results[i][0].transcript
        // }
    }

    // this.props.onChange(interimTranscript, finalTranscript)
    return finalTranscript

}

render() {
return (
    <div onLoadStart={this.start()}>
        <input type="text" placeholder="Speak here" value={this.bindResult.bind(null,this.props)} />
        <br/>
        <button> Submit </button>
        <button>Enable Speech</button>
    </div>
)
}

}
2

This will require some debugging. Please post an answer when you find one.

If you need individual debugging help, let me know.