React onChange function doesn't fire, not allowing me to change input value

Question

This is my current Cadastro.js file:

When I try to edit the form input, it keeps the "pig" value declared inside my JS file, not allowing me to neither insert nor delete the value.

I've already rewritten the function, but it won't work in any shape or form, I must be missing something.

const CadastroColaborador = () => {
    
    const [inputs, setInputs] = useState({
        nome: "pig",
        matricula: "pig",
        senha: "",
        confSenha: "",
        funcao: "",
        tipo_acesso: ""
    })

    const {nome, matricula, senha, confSenha, funcao, tipo_acesso} = inputs

    const onChange = e => {
        setInputs({...inputs, [e.target.name]
        : e.target.value });
    };
    
    return (
        <Fragment>
        <div class="container-fluid">
            <div class="title-container">
                <h1 class="header">Cadastro de colaboradores</h1>
            </div>
            <div class="text-container">
                <p>Utilize esta página para cadastrar novos colaboradores</p>
            </div>
            <div class="form-container">
                <fieldset>
                    <form id='form-cadastro'>
                        <div class="form-field" id='form-field-1'>
                            <label for="nome">Nome:</label>
                            <input type="text" className="form-input" id="nome" name='Nome' placeholder="Nome" value={nome} onChange={e => onChange(e)} required />
                        </div>
                        <div class="form-field" id='form-field-2'>  
                            <label for="matricula">Matricula:</label>
                            <input type='text' class="form-input" id="matricula" name="Matricula" placeholder="Matricula" value={matricula} onChange={e => onChange(e)} required />
                        </div> 
                        <div class="form-field" id='form-field-3'>  
                            <label for="senha">Senha:</label>
                            <input type='password' class="form-input" id="senha" name="Senha" placeholder="Senha" value={senha} onChange={e => onChange(e)} required />
                        </div>
                        <div class="form-field" id='form-field-4'>  
                            <label for="senhaConf">Confirme a senha:</label>
                            <input type='password' class="form-input" id="senhaConf" name="SenhaConf" placeholder="Confirme a senha" value={confSenha} onChange={e => onChange(e)} required />
                        </div>
                        <div class="form-field" id='form-field-3'>  
                            <label for="func">Função:</label>
                            <input type="text" class="form-input" id="func" name="Funcao" placeholder="Função" value={funcao} onChange={e => onChange(e)} required />
                        </div>  
                        <div class="form-field" id='form-field-4'>  
                            <label for="tipo-acesso">Tipo de acesso:</label>
                            <select class="form-selection" id="tipo-acesso" name='tipoUser' required>
                                <option>--SELECIONE--</option>
                                <option value="comum">Usuário comum</option>
                                <option value="super">Usuário administrador</option>
                            </select>
                        </div>  
                        <div class="form-btn">
                            <input type="submit" class='form-sub-btn' id='sub-btn' value='Cadastrar' />
                        </div>
                    </form>
                </fieldset>
            </div>
        </div>
        </Fragment>
    );
};

Answer 1

The name contains a capital letter, so you can write name="nome" instead of name="Nome" or you can use e.target.id instead of e.target.name

By the way you can simply write onChange={onChange} instead of onChange={e => onChange(e}.

I think it would also be safer to call the setInputs function like this

const onChange = e => {
  setInputs(prevInputs => ({
    ...prevInputs, 
    [e.target.id]: e.target.value 
  }));
};

Answer 2

<input type='text' class="form-input" id="matricula" name="Matricula" placeholder="Matricula" value={matricula} onChange={e => onChange(e)} required />

Notice that "name" inside your input should match the input you are updating. name="matricula" should work.

onChange is adding to your object something like this:

{matricula : "", Matricula: "" }

Name should match, since you are updating like this:

setInputs({...inputs, [e.target.name]