reactjs - I want show a variable on the main page

Question

I have a problem making a voice recognition app with React Js. I wrote this code where I have made a variable called "transcript" that contains what I speak inside the recognition.onresult and I made it print in the console but I want to show what I speak on the main page(like in an <h1></h1>). How can I do that?

import "./styles.css";

let img_url = "voice_off.png";

const SpeechRecognition =
  window.SpeechRecognition || window.webkitSpeechRecognition;

const recognition = new SpeechRecognition();

recognition.start();

function App(props) {
  const [count, setCount] = useState(0);

  const voiceCommands = () => {
    // On Start
    recognition.onstart = () => {
      console.log("voice is activated");
    };

    // Do something when we get a result
    recognition.onresult = (e) => {
      let current = e.resultIndex;

      let transcript = e.results[current][0].transcript;
      console.log(transcript);

      if (transcript === "next") {
        setCount(count + 1);
      } else {
        if (transcript === "go back") {
          setCount(count - 1);
        }
      }
    };
  };

  useEffect(() => {
    voiceCommands();
  });

  return (
    <div className="app">
      <p className="text">Counter: </p>
      <h1 className="text"> {count} </h1>
      <div className="image_cropper">
        <img className="voice_image" src={img_url} alt="nothing"></img>
      </div>
      <button className="button_plus" onClick={() => setCount(count + 1)}>
        +
      </button>
      <button className="button_minus" onClick={() => setCount(count - 1)}>
        -
      </button>
      <button className="button_microphone" onClick={() => recognition.start()}>
        {" "}
        click me to enable mic!!!
      </button>
    </div>
  );
}

export default App;```

question from:https://stackoverflow.com/questions/66058738/i-want-show-a-variable-on-the-main-page

Answer 1

Create a new variable to store the entire transcript like this

const [msg, setMsg] = useState("")

Next, whenever the recognition.onresult method is called, you can append the new transcript to what is being displayed on the browser like this

setMsg(msg + " " + transcript)

Now what you have done is set the transcript in the react component state.
Last step is to print it in the brower.

Just add a line in the return object like this

<h1>{msg}</h1>

Please don't flame me if my solution isn't what you are looking for thanks