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

Photo by Anton Maksimov juvnsky on Unsplash Sometimes, we encounter the issue when we can’t type inside a React input text field. In this article, we’ll look at how to fix the issue when we can’t type inside a React input text field.

Set the value and onChange Props

To fix the issue when we can’t type inside a React input text field, we should make sure the value and onChange props of the input are set. To do that, we write:

import React, { 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 useState hook. Then we pass that into the value prop as its value. Then we pass in a function that calls setSearchString with e.target.value so that the searchString state is updated with the inputted value. We update the searchString state to the value we inputted into the input box so that what we type will display in the input box.

Conclusion

To fix the issue when we can’t type inside a React input text field, we should make sure the value and onChange props of the input are set.