How to fill an input correctly with a value = ""?

Question

When I put value="" inside the input, it does not allow me to fill the username and the password.

Without the value="" it allows me to fill, with the value="" nothing happens

{/* User */}
<div class="input-group form-group">
   <div class="input-group-prepend">
      <span class="input-group-text"><i class="fas fa-user"></i></span>
   </div>
   <input type="text" class="form-control" placeholder="username" value={this.state.name} onChange={this.handleChange}></input>
</div>
{/* Senha */}
<div class="input-group form-group">
   <div class="input-group-prepend">
      <span class="input-group-text"><i class="fas fa-key"></i></span>
   </div>
   <input type="password" class="form-control" placeholder="password" value={this.state.password} onChange={this.handleChange}></input>
</div>

The input field has to allow me to fill username and password.

Answer 1

Try with "defaultValue" instead of "value" similar to: React Input Type not editable

{/* User */}
<div class="input-group form-group">
   <div class="input-group-prepend">
      <span class="input-group-text"><i class="fas fa-user"></i></span>
   </div>
   <input type="text" class="form-control" placeholder="username" defaultValue={this.state.name} onChange={this.handleChange}></input>
</div>
{/* Senha */}
<div class="input-group form-group">
   <div class="input-group-prepend">
      <span class="input-group-text"><i class="fas fa-key"></i></span>
   </div>
   <input type="password" class="form-control" placeholder="password" defaultValue={this.state.password} onChange={this.handleChange}></input>
</div>