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

You've put a value directly in your search input, I don't see the benefit there because you already have a placeholder. You could either remove the value from:

<input type="text" className="form-control" placeholder="Search..." value="Search..."/>

to this:

<input type="text" className="form-control" placeholder="Search..." />

Or if you think you must have it, set it as defaultValue:

<input type="text" className="form-control" placeholder="Search..." defaultValue="Search..."/>

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


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

In case if you want to set the value and involve user interaction. You should send onChange event to update the state of initial value. This is like two-way binding as angular support.

state = {
   keyword: 'test' 
} 

inputChangedHandler = (event) => {
    const updatedKeyword = event.target.value;
    // May be call for search result
}

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

the warning appears because you set a value attribute on the input and don't provide any handler to update it. there is two way to do so:

  1. you can use a ref to get form values from the DOM.

    https://reactjs.org/docs/uncontrolled-components.html

  2. set onChange handler function.