Cuando presiono la tecla enter , aparece este error: Form submission canceled because form is not connected . Pero el botón Add User funciona bien.
function Form({ modal, showModal, onAddUser }) { const [name, setName] = useState(''); const [surname, setSurname] = useState(''); const [age, setAge] = useState(''); const createUser = (e) => { if (!name || !age || !surname) { return; } else { onAddUser(name, age, surname) console.log(name, age) } setName(''); setAge('') setSurname(''); showModal(false) console.log(e); } return ( <> {modal ? <FormContainer onSubmit={createUser}> <InputContainer value={name} onChange={(e) => setName(e.target.value)} type="text" placeholder="Enter name" /> <InputContainer value={age} onChange={(e) => setAge(e.target.value)} type="number" placeholder="Enter age" /> <InputContainer value={surname} onChange={(e) => setSurname(e.target.value)} type="text" placeholder="Enter surname" /> <Button style={{ marginRight: "10px" }} type="cancel" onClick={() => showModal(false)}>Cancel</Button> <Button type="button">Add User</Button> </FormContainer> : (null) } </ > ) }Debe cambiar el tipo de botón "Agregar usuario" para submit en lugar del button . Además, debe llamar a e.preventDefault() en el envío del formulario.
Su componente debería ser así,
function Form({ modal, showModal, onAddUser }) { const [name, setName] = useState(''); const [surname, setSurname] = useState(''); const [age, setAge] = useState(''); const createUser = (e) => { // add this line here to prevent `form` element default behaviour e.preventDefault(); if (!name || !age || !surname) { return; } else { onAddUser(name, age, surname) console.log(name, age) } setName(''); setAge('') setSurname(''); showModal(false) console.log(e); } return ( <> {modal ? <FormContainer onSubmit={createUser}> <InputContainer value={name} onChange={(e) => setName(e.target.value)} type="text" placeholder="Enter name" /> <InputContainer value={age} onChange={(e) => setAge(e.target.value)} type="number" placeholder="Enter age" /> <InputContainer value={surname} onChange={(e) => setSurname(e.target.value)} type="text" placeholder="Enter surname" /> <Button style={{ marginRight: "10px" }} type="cancel" onClick={() => showModal(false)}>Cancel</Button> {/* here we changed type="button" to type="submit" */} <Button type="submit">Add User</Button> </FormContainer> : (null) } </ > ) }