score:1

Accepted answer

Try this,

const [email, SetEmail] = useState("");
<Form.Control
    onChange={e => SetEmail(e.target.value)}
    type="email"
    name="email"
    value={email || ""}
/>

score:4

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.

score:4

You should not provide value directly Instead, you can provide defaultValue

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

score:33

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)} />
   );
} 

score:166

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


Related Query

More Query from same tag