javascript - React.js onChange <input> tag hangs

Question

As I want to get the name through input tag. Whenever I tried to enter some value, only one letter is type and then the input box comes into its ideal position. It is got hang or stuck, I really won't understand. I clear that this code is working in my another project so it is really weird.

const [name, setName] = useState('')

<input type='text' placeholder='Name' class='inputColor width90' name='n' 
    onChange={(e)=>{
        setName(e.target.value)
    }}
required/>

Here is my css for above code

.inputColor{
    padding: 5px;
    margin: 10px;
    border: 0px solid;
    background-color: #F0F0F0;
    color: #000000;
    font-size: 18px;
    outline: none;
    height: 35px;
}
.width90{
    width: 90%;
}

But when I run the code without using onChange function, the input box is not stuck or hang. I check the syntax as many time but I don't know why it is happening.

Hope someone gives me the best solution for this.

question from:https://stackoverflow.com/questions/66052369/react-js-onchange-input-tag-hangs

Answer 1

You need to add value={name}

<input 
    type='text' 
    placeholder='Name' 
    class='inputColor width90' 
    name='n' 
    value={name} 
    onChange={(e)=> {
        setName(e.target.value)
    }}
    required
/>

The reason is because if you have an onChange it means that you are trying to set the value dynamically, that's why you need to set the value to the value of name