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.
5 replies on “How to Fix the Issue Where We Can’t Type in a React Input Text Field?”
Oh yeah, it works amazing!
thanks a lot.
No problem
I am doing the same thing except I keep my state in the redux toolkit slicer. I had to dispatch the action to update the state field using data retrieved from database. After rendering, the data was displayed in the field but they are all locked and I could not modify it. Do you happen to have some idea about this issue? Thanks
Did you set the redux state value to a state and update the state when it changes?
You can use the state as the value of the value prop of the input.
A very simple solution. Thanks a ton!