I am trying to pass a function as a prop to a child component so that the child can call it. Here is my parent component:
interface DateValue {
dateValue: string;
}
const Page: React.FC = () => {
const dateChanged = (value: DateValue) => {
console.log(value);
}
return (
<IonPage>
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonMenuButton />
</IonButtons>
<IonTitle>Financial Records</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Financial Records</IonTitle>
</IonToolbar>
</IonHeader>
<DateContainer onChanged={e => dateChanged} />
</IonContent>
</IonPage>
);
};
export default Page;
And here is my child component:
interface Prop {
onChanged: (date: string) => void
}
const DateContainer: React.FC<Prop> = (prop: Prop) => {
const [currentDate, setCurrentDate] = useState<string>(moment().toISOString());
const picker = createRef<HTMLIonDatetimeElement>();
const dateChanged = (value: string) => {
setCurrentDate(value);
prop.onChanged(value);
}
const openPicker = () => {
picker.current?.open();
}
return (
<div className="DateContainer">
<div className="header">
<h3 className="title"><IonDatetime onIonChange={e => dateChanged(e.detail.value!)} ref={picker} value={currentDate} /> <IonIcon onClick={openPicker} className="icon" ios={calendarOutline} md={calendarSharp} /></h3>
</div>
</div>
);
};
export default DateContainer;
However, when the child calls prop.onChanged(value);, it does not trigger the function from the parent:
const dateChanged = (value: DateValue) => {
console.log(value);
}
I must have made a mistake somewhere. Can you help me figure out what went wrong?