React.js onChange<input> 标签挂起

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.

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

Answer 2

Here I found the actual cause or whatever we say to it, we cannot identify it because it doesnot show any error on console and successfully compile the program.

const MyFunc = () => {

    const [name, setName] = useState('')
    
    const submitData = () => {
            Axios.post('http://localhost:3001/api/upload',{
                 n: name
            }
     }

     return (
          <div class='myCSS'>
            <table>
                <tr>
                    <td>
                        <img src={myimg} alt={myimg}/>
                    </td><td>
                        <input type='text' name='n' placeholder='Name' 
                            class='inputColor width90' 
                            onChange={(e)=>{setName(e.target.value)}}
                        required/>
                    </td><td>
                        <input type='submit' value='upload'
                             onClick={submitData}/>
                    </td>
                </tr>
            </table>
        </div>
     )
}

So, firstly I define the name variable and the submitData outside MyFunc but when I define both of them inside the function, the hang or stuck error resolved.