import React from 'react' ; import TextField from "@material-ui/core/TextField" ; interface IProps { readonly onSearch : ( text : string ) => void ; } export const SearchBar = ( props ) => { const value = React . useRef ( "" ) ; function handleKeyPress ( event ) { if ( event . key === 'Enter' ) { event . stopPropagation ( ) ; event . preventDefault ( ) ; props . onSearch ( value . current ) ; } } function handleChange ( text ) { value . current = text ; } return ( < TextField label = "Enter a search: " variant = "outlined" onChange = { event => handleChange ( event . currentTarget . value ) } onKeyPress = { event => handleKeyPress ( event ) } / > ) ; } ;