parentComponent description import React , { useEffect , useRef , useState } from 'react' ; import { useSelector } from 'react-redux' ; import { RootState } from '@/store/reducers' ; import Highlight from 'react-highlight' ; import ScrollAnchor from './ScrollAnchor' ; function StreamDisplay ( ) { const plannedResponseBoolean = useSelector ( ( store ) => store . navigation . plannedResponseBoolean ) ; const currentServerId = useSelector ( ( store ) => store . navigation . currentServerId ) ; const outputStream = useSelector ( ( store ) => store . messages . streams ) ; let counter = 0 ; return ( < div className = "streamDisplay_container streamDisplay_outputContainer" > < div className = { plannedResponseBoolean ? "streamDisplay_outputboxSmall" : "streamDisplay_outputboxLarge" } > { currentServerId && outputStream [ currentServerId ] && outputStream [ currentServerId ] . map ( ( code ) => ( < div className = "code" key = { counter ++ } > < Highlight className = 'json' > { code . toString ( ) } < /Highlight> < ScrollAnchor / > < /div>))} < /div> < /div>); } export default StreamDisplay ;