Counting vowels in a string with React hooks

December 29, 2021

I am unable to figure out how to print the number of vowels that I type into a form. I am not sure where the bug is, but when I submit the form, nothing happens.

const App = () => {
  const [results, setResults] = useState(0);
  const [input, setInput] = useState('');

  const handleSubmit = (e, input) => {
    e.preventDefault();

    let count = 0;
    for (let i = 0; i < input.length(); i++) {
      if (
        input.charAt(i) === 'a' ||
        input.charAt(i) === 'e' ||
        input.charAt(i) === 'i' ||
        input.charAt(i) === 'o' ||
        input.charAt(i) === 'u'
      ) {
        count++;
      }
    }
    setResults(count);
  };

  return (
    <div className="App">
      <div>{results}</div>
      <div>
        <form onSubmit={(e) => handleSubmit(e, input)}>
          <input
            type="text"
            value={input}
            onChange={(e) => setInput(e.target.value)}
          ></input>
          <button>Submit</button>
        </form>
      </div>
    </div>
  );
};