React 道具未定义

Question

I'm very new to React, so here is my first problem.

I can't access my props in a children component. I need to pass a function from the parent to the children, to get Data from the Children.

Error Code in Browser Console:

ExpenseForm.js:27 Uncaught TypeError: props.onSaveExpenseData is not a function at submitHandler (ExpenseForm.js:27:1)

I've tried to log a "test" prop to the console, but its also undefined.. so i think that something is wrong with the props..

Heres my parent:

import React from 'react';
import ExpenseForm from './ExpenseForm';

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

  return (
    <div>
      <ExpenseForm onSaveExpenseData={saveExpenseDataHandler} test="test" />
    </div>
  );
};

export default NewExpense;

And this is my children component:

import React, { useState } from 'react';

function ExpenseForm(props) {
  const [enteredTitle, setEnteredTitle] = useState('');
  const [enteredAmount, setEnteredAmount] = useState('');
  const [enteredDate, setEnteredDate] = useState('');

  const titleChangeHandler = e => {
    setEnteredTitle(e.target.value);
  };

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

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

  const submitHandler = e => {
    e.preventDefault();
    const expenseData = {
      title: enteredTitle,
      amount: enteredAmount,
      date: new Date(enteredDate),
    };
    props.onSaveExpenseData(expenseData);
    console.log(props.test);
    setEnteredTitle('');
    setEnteredAmount('');
    setEnteredDate('');
  };

+ return

Answer 1

Firstly destructure your props and then use it. Also, your expenseData is an object while saveExpenseDataHandler is a function so ofcourse onSaveExpenseData will expect a function in the child.

import React, { useState } from 'react';

function ExpenseForm(props) {
  const {onSaveExpenseData, test} = props
  const [enteredTitle, setEnteredTitle] = useState('');
  const [enteredAmount, setEnteredAmount] = useState('');
  const [enteredDate, setEnteredDate] = useState('');

  const titleChangeHandler = e => {
    setEnteredTitle(e.target.value);
  };

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

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

  const submitHandler = e => {
    e.preventDefault();
    const expenseData = {
      title: enteredTitle,
      amount: enteredAmount,
      date: new Date(enteredDate),
    };
    onSaveExpenseData(expenseData);
    console.log(test);
    setEnteredTitle('');
    setEnteredAmount('');
    setEnteredDate('');
  };

 return

Answer 2

It's working now!

My fault was that I've rendered the child component(ExpenseForm.js) in the app.js (main file) instead of the parent component (NewExpenses.js), so I think the parent-children-connection was not there.