Failed form propType: You provided a `value` prop to a form field without an `onChange` handler

The issue:

When we were trying to load an input element from JSX we added a value of that input element. As soon as we tried that it we got the following error:

Failed form propType: You provided a `value` prop to a form field without an `onChange` handler

The solution #1:

If we don’t take the input value from the user by this input field, then we need to make this field read-only by setting the defaultValue.

render() {
  return (
      <input 
         type="text" 
         defaultValue={this.state.keyword} />
   );
} 

The solution #2:

If we want to set the value and involve user interaction we should send onChange event to update the state of initial value.

render() {
  return (
      <input 
         type="text" 
         placeholder="Search..."
         value={this.state.keyword} 
         onChange={(event)=>this.inputChangedHandler(event)} />
   );
} 

https://facebook.github.io/react/docs/uncontrolled-components.html#default-values

Share