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

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.