Two-Way Binding

We can implement something which is called two-way binding, which simply means that for inputs we don't just listen to changes, but we can also pass a new value back into the input. So that we can reset or change the input programmatically. And how do we do that? Well, it's very simple. All we have to do is add the value attribute, which is a default attribute, to this input element. This will set the internal value property, which every input element has. And we can set it to a new value. And here, I will bind this to enteredTitle. So now it is this two-way binding because now we don't just listen to changes in the input to update our state. But we also feed the state back into the input so that when we change the state, we also change input. This might sound like an infinite loop, but it actually isn't.

const [ enteredTitle ,  setEnteredTitle ] = useState('  ');

const titleChangeHandler = (event) => {
    setEnteredTitle(event.target.value);
}



<form  onSubmit={submitHandler}>
 <label>Title</label>
   < input type= "text"  
      value = {enteredTitle} 
       onChange = {titleChangeHandler >
</form>