How to Fix the Problem Where We Can’t Type in React Input Text Field?

Sometimes, we may run into the problem where we can’t type in a React input text field.

In this article, we’ll look at how to fix the problem where we can’t type in a React input text field.

Fix the Problem Where We Can’t Type in React Input Text Field

To fix the problem where we can’t type in a React input text field, we should add an onChange and value props to the input.

For instance, we can write:

import { useState } from "react";

export default function App() {
  const [searchString, setSearchString] = useState();
  return (
    <div className="App">
      <input
        type="text"
        value={searchString}
        onChange={(e) => setSearchString(e.target.value)}
      />
    </div>
  );
}

We defined the searchString state with the setSearchString state setter function with the useState hook.

Then we set the value prop’s value to searchString .

The onChange prop’s value is a function that takes the e.target.value , which is the inputted value, and call setSearchString with it as its argument.

Now we should be able to type into the text box since the input value is set as the value of a state and the state is used as the value of the value prop.

Conclusion

To fix the problem where we can’t type in a React input text field, we should add an onChange and value props to the input.