After performing a date calculation, I stored the values of year, month, and day in an object. Now, my goal is to send this object to the parent component App.js, and then pass that data to another child component named Modal.js as a prop. I want to display the calculation result in a popup message within the modal. However, I'm facing challenges in using and storing the received data in the App.js component.
UserAgeForm.js
const onSubmitHandler = (e) => {
e.preventDefault();
const calculateAge = () => {
let calculatedYear;
let calculatedMonth;
let calculatedDay;
if (currentDate < birthDay || currentMonth < birthMonth) {
calculatedDay = currentDate + currentMonthDays - birthDay;
calculatedMonth = currentMonth + 11 - birthMonth;
calculatedYear = currentYear - 1 - birthYear;
} else {
calculatedDay = currentDate - birthDay;
calculatedMonth = currentMonth - birthMonth;
calculatedYear = currentYear - birthYear;
}
props.userData = {
calculatedYear,
calculatedMonth,
calculatedDay,
};
};
calculateAge();
};
App.js
function App() {
const receivedUserData = {};
const allUserData = {};
return (
<>
<UserAgeForm userData={receivedUserData} />
{ReactDOM.createPortal(
<Modal resultData={allUserData} />,
document.getElementById("modal")
)}
</>
);
}