Why can’t I trigger a function in a <div/> daughter tag in React?

Question

I am using the Unform package to create a form in React and have the following function that renders the form:

function FormularioCliente() {
    
    function handleSubmit(data) {
        console.log(data);
    }

    return (
            <Form onSubmit={handleSubmit}>
                <div className="Nome">
                    <label>Nome: <Input name="nome" type="name" /></label>
                </div>

                <div className="Email">
                    <label>E-mail: <Input name="email" type="email" /></label>
                </div>

                <div className="Senha">
                    <label>Senha:<Input name="senha" type="password" /></label>
                </div>

                <div className="Botoes">
                    <button type="submit">Login</button>
                </div>

                <div>
                    <button type="asdasda">Cadastre-se</button>
                </div>
            </Form>
    )
};

export default FormularioCliente;

The problem is that the method handleSubmit() is called inside the tag Form, Since I have more than one button inside, they all trigger the function and do the same thing. I would like each button to do something different, so I changed the code a little to call the function directly on <div /> that’s the button, and that <div /> is the daughter of <Form></Form>. Stayed like this:

function FormularioCliente() {
    
    function handleSubmit(data) {
        console.log(data);
    }

    return (
            <Form>
                <div className="Nome">
                    <label>Nome: <Input name="nome" type="name" /></label>
                </div>

                <div className="Email">
                    <label>E-mail: <Input name="email" type="email" /></label>
                </div>

                <div className="Senha">
                    <label>Senha:<Input name="senha" type="password" /></label>
                </div>

                <div onSubmit={handleSubmit} className="Botoes">
                    <button type="submit">Login</button>
                </div>

                <div>
                    <button type="asdasda">Cadastre-se</button>
                </div>
            </Form>
    )
};

export default FormularioCliente;

But when I click on the button I get the following console error message: TypeError: p is not a function

Why the fact that I call the function in a daughter tag disables my code?

Answer 1

Here there is no way to install the package Unform, but, from what I noticed that you do not know how to work with forms and buttons contained in <form>. The button of the type submit will submit the forms with the information contained within their <input/>, <select/> etc. and to have another button may not be of the type submit, but, yes, like button (in your specific case).

You need to study html, javascript and css the basics for then working with a library javascript. My proposal is to show this to you with minimal example:

function Form({children, onSubmit}) {
  return (
    <div>
      <h1>Formulário</h1>
      <form onSubmit={onSubmit}>{children}</form>
    </div>
  )
}
function Cadastro({handleToogle}) {
  return (
    <div>
      <h1>Cadastro</h1>
      <button onClick={handleToogle}>Voltar</button>
    </div>
  )
}
function App() {
  const [status, setStatus] = React.useState(false);
  const [nome, setNome] = React.useState('');
  const handleOnSubmit = (e) => {
    e.preventDefault();
    alert(nome);
  }
  const handleToogle = () => setStatus(status => !status);
  if (status) {
    return <Cadastro handleToogle={handleToogle} />
  }
  return (
    <Form onSubmit={handleOnSubmit}>
      <div>
        Nome: <input type="text" value={nome} onChange={e => setNome(e.target.value)} />
      </div>
      <div style={{marginTop:10}}>
        <button type="submit">Enviar</button>{' '} 
        <button type="button" onClick={handleToogle}>Cadastro</button>
      </div>
    </Form>
  )
}
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>