Доступ к проп из экспортируемого компонента внутри другого компонента

Question

Я пытаюсь получить доступ к пропущенному через компонент. Опора - это речевая стенограмма, в которой мне нужно запускать функцию всякий раз, когда транскрипционная реквизит изменяется в моем основном компоненте, в который визуализируется реквизит. Я использую onChange внутри своего компонента тела, потому что компонент содержит диапазон, который обновляется с помощью устной расшифровки стенограммы каждый раз, когда кто-то говорит.

Я попытался передать транскрипт в качестве прямой поддержки, однако он возвращает undefined в моем основном компоненте

//the component that contains the transcript

import React, { Component } from "react";
import SpeechRecognition from "react-speech-recognition";
import { Button } from 'react-bootstrap';


class Dictaphone extends Component {

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

    return (
      <div>
        <span className="transcriptspan">{transcript}</span>
        <Button transcript={transcript} variant="outline-dark" onClick={resetTranscript}>Reset</Button>
        </div>
    )
  }
}

export default SpeechRecognition(Dictaphone)



// inside the main component where I am trying to view the transcript passed in from the SpeechRecognition component

  <div className="bottombtns">
     <SpeechRecognition grabIntent={this.props.grabIntent} id="speakAloud" className="audioBtns" onChange={()=>{ console.log(this.props.transcript)}}/>           
  </div>


I'd like to be able to console log the transcript coming from SpeechRecognition so that I can update things in my main component when the transcript changes.