CODEWITHSUNDEEP
reactjsstatespeech-recognition
Nathan Barel
Nathan Barel

Reputation: 388

React Speech Recognition - inserting the text to the memory by updating the state

There is a similar question but I can't comment on it so I opening a new one. I am new to React and try to implement React SpeechRecognition component for my app. The text should be in an input box. the code for it (from react doc [https://www.npmjs.com/package/react-speech-recognition][1] - with span tag instead of an input):

import React, { PropTypes, Component } from 'react'
import SpeechRecognition from 'react-speech-recognition'
    
const propTypes = {
  // Props injected by SpeechRecognition
  transcript: PropTypes.string,
  resetTranscript: PropTypes.func,
  browserSupportsSpeechRecognition: PropTypes.bool
}

class Dictaphone extends Component {
  render() {
    const { transcript, resetTranscript, browserSupportsSpeechRecognition } = this.props

    if (!browserSupportsSpeechRecognition) {
      return null
    }

    return (
      <div>
        <button onClick={resetTranscript}>Reset</button>
        <span>{transcript}</span>
      </div>
    )
  }
}

Dictaphone.propTypes = propTypes

export default SpeechRecognition(Dictaphone)

Now I try to update a state of text (a string) by the transcript (the words that have been already recognized) but I can't make it. from an earlier question, someone suggested this:

<input 
  type="text" 
  value={transcript}
  onChange={event => this.onInputChange(event.target.value)}
/>

now when I speak, I do see the words in the input box, so the final code should be :

import React, { Component } from "react";
import PropTypes from "prop-types";
import SpeechRecognition from "react-speech-recognition";

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

class Dictaphone extends Component {
  constructor() {
      super();
      this.state = {
         text: '',
         events: []
      }
    }

  onInputChange = (event) => {
    console.log (event.target.value);
    this.setState( {text: event.target.value} );
  }

  render() {
    const { transcript, resetTranscript, browserSupportsSpeechRecognition } = this.props;
    
    if (!browserSupportsSpeechRecognition) {
      return null
    }

    return (
      <div>
        <button onClick={resetTranscript}>Reset</button>
        <input 
          className='bg-light-blue'
          type="text" 
          value={transcript} 
          onChange={event => this.onInputChange(event.target.value)}
        />     
     </div>
    )
  }
}

Dictaphone.propTypes = propTypes;

export default SpeechRecognition(Dictaphone);

but when I console.log(event.target.value) which is text - I see nothing so I'm doing something wrong. Note that if I just write in the render func:

render() {
    const { transcript, resetTranscript, browserSupportsSpeechRecognition } = this.props;
    var x = transcript;
    console.log('x is ',x);
    console.log('x length is: ',x.length);
.....

it does console the transcript (x) but it's not what I want - I need to save it in text by updating the state.

any suggestion?

Upvotes: 0

Views: 1525

Answers (1)

Pavan
Pavan

Reputation: 1015

If you need to store the transcript prop in your state you should do something like this.

   componentDidUpdate(prevProps){
     if(prevProps.transcript !== this.props.transcript){
       this.setState({
         text: this.props.transcript
       });
     }
   }

In your render method use this.state.text to show in the input value. Also in your constructor do 

this.state = {
  text: props.transcript
}

Upvotes: 1

Related Questions