Why is the function not implemented when I submitted the form?

Question

The function I pass to the onsubmit event is not executed when the form is submitted

import React from 'react';
import styles from './Form.module.css';

import Button from './Button';

const Form = function (props) {

  const addUserHandler = function (e) {
    e.preventDefault();
    console.log(135);
  };

  return (
    <form onSubmit={addUserHandler}>
      <input
        type='text'
        className={styles.input}
        placeholder='Your Age'
        ref={nameInputRef}
      />

      <Button type='submit'>add user</Button>
    </form>
  );
};

export default Form;

I expected that the function adduserhandler will be executed when I submitted the form.

Answer 1

You are not passing the type correctly from <Button> to <button>, which means that the submit button is rendered as a normal button which does not submit the form. Instead of:

<button type={props.type ? 'button' : props.type}>

do:

<button type={props.type ? props.type : 'button'}>

or shorter:

<button type={props.type || 'button'}>