message: throttle settings refactor in progress
diff: @@ -2,36 +2,37 @@ import React, {useState} from 'react';
  const ThrottleSettings: React.FC = () => {
  // variable to store/reference connection
  - let num = '';
  - const onChange = (event: string) => {
  - num = event;
  + const [throttleNum, setThrottleNum] = useState('');
  +
  + //onChange function to set throttleNum
  + const onChange = (e: any) => {
  + setThrottleNum(e.target.value);
  };
  +
  // Creating function to tie to get to the backend
  - const throttleFunc = () => {
  + const throttleFunc = (e: any) => {
  + e.preventDefault();
  const backgroundConnection = chrome.runtime.connect();
  // post the message with index in payload to the connection
  backgroundConnection.postMessage({
  action: 'throttleEdit',
  tabId: chrome.devtools.inspectedWindow.tabId,
  - payload: {value: num}, // edit this value to some other number
  + payload: {value: throttleNum}, // edit this value to some other number
  });
  };
  return (
  <div>
  <h2>Enter Throttle</h2>
  + <form onSubmit={throttleFunc}>
  <input
  style={{marginBottom: '10px'}}
  - onChange={e => onChange(e.target.value)}
  + onChange={onChange}
  + value={throttleNum}
  />{' '}
  <span style={{fontSize: '14px'}}>milliseconds</span>
  - <div>
  - <button
  - onClick={() => {
  - throttleFunc();
  - }}>
  - Enter
  - </button>
  - </div>
  + <button type="submit">Enter</button>
  + <span>Current throttle is {throttleNum} ms</span>
  + </form>
  </div>
  );
  };
  