Delay or not sending the data to the back-end, what to do?

Question

I have a ready front-end of a registration form, but they are working as follows: I do all the registration and when clicking on the button it calls the function that takes the values of the fields and Ste in a state variable with the respective names. After that I connect to the back-end through Xios, sending a post with the data to register. Now comes error, I click the button and does not send the first time, it is only going the second time I click and sometimes only the third, IE, it does not go first. I already looked at the back and it seems right to me, if you need to look at the code I can also send. NOTE: the password I am setting elsewhere.

Front code:

  const [Senha, setSenha] = useState("")
  const [Email, setEmail] = useState("")
  const [CNPJ, setCNPJ] = useState("")
  const [Nome, setNome] = useState("")
  const [Cidade, setCidade] = useState("")
  const [Estado, setEstado] = useState("")
  const [Endereco, setEndereco] = useState("")
  async function Registrar(value){
    setEmail(document.getElementById("Email").value)
    setCNPJ(document.getElementById("CNPJ").value)
    setNome(document.getElementById("Nome").value)
    setEndereco(document.getElementById("Endereco").value)
    setCidade(document.getElementById("Cidade").value)
    setEstado(document.getElementById("Estado").value)
    if((Senha != "") && (Email != "") && (Cidade != "") && (Estado != "") && (Nome != "") && (CNPJ != "") && (Endereco != "")){
        await api.post("/Cadastro",{
            nomeCondominio: Nome,
            cnpj: CNPJ,
            endereco: Endereco,
            Cidade: Cidade,
            Email: Email,
            Estado: Estado,
            Senha: Senha
        })
    }
  }

function receiving the data:

export const saveCondominio = async (request: Request, response: Response) =>{
    console.log("Salvando os dados...")
    console.log(request.body)
    const con = await getRepository(condominio).save(request.body)
    response.json(con)
}

Can I be going wrong? or capturing input data the wrong way?

Answer 1

In the React the concept of state is one of the most important, the way you are using is not the way that the React makes to recover state of by examples of <input />.

The basic code to retrieve information from a text box is as follows:

const [text, setText] = React.useState('');

<input type="text" value={text} onChange={e => setText(e.target.value)} />

creating in this case a state variable with the name of text and its code to change its status the method setText and at the event onChange the assignment of the information typed in the text box, example:

function App() {
  const [text, setText] = React.useState('');  
  return (
    <div>
      <input 
        type="text"
        value={text}
        onChange={e => setText(e.target.value)}
      />
      <p>{text || "nada digitado"}</p>
    </div>
  );
}
ReactDOM.render( <App/> , document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

When passing the information to your back-end just assign the variable value text or the one created in the code. Also take care of the programming style variables should always start in lowercase and the other main parts their initial in upper case, example:

nomePessoa
nome
idadeAluno