Pass props between components using state hook - reactjs

Question

sorry if this question is so simple, I want to pass props between components using state hooks, this is the first component:
import React, { useState } from "react";
import NewExpense from "../components/Expenses/NewExpense/NewExpense";
import Expenses from "../components/Expenses/Expenses";
import "../components/Expenses/NewExpense/ExpenseForm.css";
const DUMMY_EXPENSES = [
{
id: "e1",
title: "Lego Simpsons",
amount: 100.5,
date: new Date(2021, 1, 15),
},
{
id: "e2",
title: "Lego Mindstorms",
amount: 200.5,
date: new Date(2021, 2, 15),
},
{
id: "e3",
title: "Lego Batman",
amount: 300.5,
date: new Date(2021, 3, 15),
},
{
id: "e4",
title: "Lego Star Wars",
amount: 400.5,
date: new Date(2021, 4, 15),
},
];
const VerExpensesV3 = () => {
const [expenses, setExpenses] = useState(DUMMY_EXPENSES);
const [showForm, setShowForm] = useState(false);
const addExpenseHandler = (expense) => {
setExpenses((prevExpenses) => {
return [expense, ...prevExpenses];
});
};
const statusFormHandler = () => {
return showForm;
}
const showFormHandler = () => {
setShowForm(true);
};
return (
<div>
<h1>My expenses</h1>
{showForm && (
<NewExpense
onAddExpense={addExpenseHandler}
statusForm={statusFormHandler}
/>
)}
<div className="new-expense__actions">
<button onClick={showFormHandler}>Add New Expense</button>
</div>
<Expenses records={expenses} />
</div>
);
};
export default VerExpensesV3;
this is the second one:
import React, { useState } from 'react';
import './NewExpense.css';
import ExpenseFormV2 from './ExpenseFormV2';
const NewExpense = (props) => {
const [statusForm, setStatusForm] = useState(props.statusFormHandler);
console.log("el valor de statusForm en NewExpense es: "+statusForm);
const saveExpenseDataHandler =
(enteredExpenseData) => {
const expenseData = {
...enteredExpenseData,
id: Math.random().toString()
};
props.onAddExpense(expenseData);
};
return (
<div className="new-expense">
<ExpenseFormV2
onSaveExpenseData={saveExpenseDataHandler}
currentStatusForm={statusForm}/>
</div>
)
};
export default NewExpense;
So far I'm stuck because in these lines:
const [statusForm, setStatusForm] = useState(props.statusFormHandler);
console.log("el valor de statusForm en NewExpense es: "+statusForm);
I get "undefined", from my point of view the value passed is NULL from component 1 to component 2 and I don't understand why, so your comments and suggestions will be appreciated.
Thanks a lot

Answer 1

You're using the wrong property on props in <NewExpense>. Try this instead:
const [statusForm, setStatusForm] = useState(props.statusForm);
statusForm is the prop you defined on the component, and statusFormHandler is the name of the function you assign to the statusForm in the first component.
If you actually want your prop name to be statusFormHandler then disregard the above and use this
<NewExpense
onAddExpense={addExpenseHandler}
statusFormHandler={statusFormHandler}
/>

Answer 2

In my case I was using lower letter variable name.
const newExpense = (props) => {
const [isDefault, setDefault] = useState(true);
const saveNewExpenseHandler = (expenseData) => {
props.onSaveExpense(expenseData);
};
return (
<div className="new-expense">
<ExpenseForm onSavePressed={saveNewExpenseHandler} />
</div>
);
};
export default newExpense;
once I changed newExpense to NewExpense it all worked fine