create handler function for controlled input

Moved onChange handler function to a component method and simplified it a smidge.

Must use parseInt now because the input type will change to 'text' rather than 'number'

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -231,10 +231,6 @@ const BrewRenderer = (props)=>{
 		}));
 	};
 
-	// const handlePageChange = (pageNumber) => {
-    //     // Scroll to the desired page
-    //     scrollToPage(pageNumber);
-    // };
 
 	return (
 		<>

client/homebrew/brewRenderer/toolBar/toolBar.jsx

@@ -25,6 +25,10 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 		setZoomLevel(zoomChange);
 	};
 
+	const handlePageChange = (page)=>{
+		setPageInput((page));
+	}
+
 	return (
 		<div className='toolBar'>
 			<div className='tool'>
@@ -79,17 +83,10 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 				min={1}
 				max={state.totalPages}
 				id='pageInput'
-				value={state.pageNumberInput}
+				value={pageInput}
-				onChange={(e)=>handleInputChange(e.target.value, 'page')}
+				onChange={(e)=>{
-				onBlur={(e)=>{
+					handlePageChange(e.target.value == false ? e.target.value : parseInt(e.target.value));}}
-					parseInt(state.pageNumberInput) === state.currentPage ||
+				onBlur={()=>onPageChange(pageInput)}
-                        onPageChange(parseInt(state.pageNumberInput) - 1);
-				}}
-				onKeyPress={(e)=>{
-					if(e.key === 'Enter') {
-						e.target.blur();
-					}
-				}}
 			/>
 
 			<div className='tool'>