React form handling

I’m new to React and I’m practicing some form-input handling with Hooks. So far I have something where you can “purchase” tickets for an amusemenet park. It has all the necessary hooks and props to pass the data and read the data from the input fields. Except it’s giving me the following error message: “Uncaught TypeError: props.onSaveExpenseData is not a function”. But onSaveExpenseDate is being passed. Does anyone know why this is happening and nothing is being displayed on the screen?


NewExpense.js

`

import React from "react";
import "./NewExpense.css";
import Ticket from "./ticket";

const NewExpense = (props) => {
  const saveExpenseDataHandler = (enteredExpenseData) => {
    const expenseData = {
      ...enteredExpenseData,
      id: Math.random().toString(),
    };
    props.onAddExpense(expenseData);
  };

  return (
    <div className="new-expense">
      {/* This is a convention that i'm following "onSaveExpenseData", to make it clear that hte value for this prop is a function and can be used to call this instead
      of the expense form component. */}
      <Ticket onSaveExpenseData={saveExpenseDataHandler} />
    </div>
  );
};

export default NewExpense;

`

ticket.js

`

import React, { useState } from "react";
import "./Ticket.css";
const Ticket = (props) => {
  const [enteredTitle, setEnteredTitle] = useState("");
  const [enteredAmount, setEnteredAmount] = useState("");
  const [enteredDate, setEnteredDate] = useState("");
  const titleChangeHandler = (event) => {
    setEnteredTitle(event.target.value);
  };

  const amountChangeHandler = (event) => {
    setEnteredAmount(event.target.value);
  };

  const dateChangeHandler = (event) => {
    setEnteredDate(event.target.value);
  };

  const submitHandler = (event) => {
    event.preventDefault();

    const expenseData = {
      title: enteredTitle,
      amount: enteredAmount,
      date: new Date(enteredDate),
    };

    props.onSaveExpenseData(expenseData);
    setEnteredTitle("");
    setEnteredAmount("");
    setEnteredDate("");
  };

  return (
    <form onSubmit={submitHandler}>
      <div className="new-expense__controls">
        <div className="new-expense__control">
          <label>Title</label>
          <input
            type="text"
            value={enteredTitle}
            onChange={titleChangeHandler}
          />
        </div>
        <div className="new-expense__control">
          <label>Amount</label>
          <input
            type="number"
            value={enteredAmount}
            onChange={amountChangeHandler}
            min="1"
            max="10"
          />
        </div>
        <div className="new-expense__control">
          <label>Date</label>
          <input
            type="date"
            value={enteredDate}
            min="2022-01-01"
            max="2024-12-31"
            onChange={dateChangeHandler}
          />
        </div>
      </div>
      <div className="new-expense__actions">
        <button type="submit">Buy ticket</button>
      </div>
    </form>
  );
};

export default Ticket;

`

I’ve tried to make several states and make use of eventhandlers to submit the data.