Event.target.value is returning undefined - reactjs

Question

I am trying to create a timer window and I have created a seperate component for that. I am trying to pass the time in from the main component into the child component. The issue is the state for the timer input box is not changing. I have tried using useEffect but I have a feeling I may be implementing it wrongly.
Update
Found out that the event.target.value is returning an undefined which is why the state is not changing. Any ideas as to why it is returning an undefined?
Code
// Parent Component
const [targetTimeS, setTargetTimeS] = React.useState(60);
function handleMinuteSelectionChange(event) {
const minuteSelection = event.target.value;
if (isNaN(minuteSelection)) {
window.alert("Please select a number");
} else {
const minuteSelectionS = parseInt(minuteSelection);
if (minuteSelectionS > 59 || minuteSelectionS < 0) {
window.alert("Please choose a minutes value between 0 and 59");
} else {
console.log(`Minute selection changed: ${minuteSelectionS}`);
setTempTargetTimeS(minuteSelectionS * 60);
}
}
}
function timerWindow() {
return (
<TimerWindow
handleTargetTimeCancelButtonClicked={
handleTargetTimeCancelButtonClicked
}
handleMinuteSelectionChange={(e)=> handleMinuteSelectionChange(e)}
handleTargetTimeDoneButtonClicked={handleTargetTimeDoneButtonClicked}
value={targetTimeS / 60}
openModal={showTargetTimeWindow}
closeModal={hideTargetTimeWindow}
handlePresetButtonClicked={handlePresetButtonClicked}
handleHideTimerWindowClicked={hideTargetTimeWindow}
/>
);
}
Child Component
export default function TimerWindow(props: {
handleTargetTimeDoneButtonClicked: (e) => void;
handleTargetTimeCancelButtonClicked: (e) => void;
handleMinuteSelectionChange: (e) => void;
handlePresetButtonClicked?: (e: number) => void;
handleHideTimerWindowClicked?: (e) => void;
closeModal: (e) => void;
openModal: boolean;
value: number;
}): JSX.Element {
const [targetTimeS, setTargetTimeS] = useState(60);
useEffect(() => {
setTargetTimeS(props.value);
console.log(props.value);
}, [targetTimeS]);
const recorderClasses = speechRecorderStyles();
return (
<Modal open={props.openModal} onClose={props.closeModal}>
<div className={recorderClasses.targetTimeWindow}>
<CloseIcon
onClick={props.handleHideTimerWindowClicked}
className={recorderClasses.windowCloseButton}
/>
<Typography className={recorderClasses.selectRecordingTime}>
Select recording time
</Typography>
<Stack spacing={4} direction="column" alignItems="center" height="100%">
<Stack spacing={4} direction="row">
<TimerPresets onClick={props.handlePresetButtonClicked} />
</Stack>
</Stack>
<TextField
id="outlined-basic"
label="Minutes"
variant="outlined"
className={recorderClasses.targetTimeSelection}
value={targetTimeS}
onChange={(e) => props.handleMinuteSelectionChange(e.target.value)}
sx={{
mt: 6,
ml: 1,
}}
type="number"
/>
<Stack spacing={4} direction="row">
<Button
className={recorderClasses.targetTimeCancelButton}
onClick={props.handleTargetTimeCancelButtonClicked}
>
<Typography
className={recorderClasses.targetTimeCancelButtonTypography}
>
Cancel
</Typography>
</Button>
<Button
className={recorderClasses.targetTimeDoneButton}
onClick={props.handleTargetTimeDoneButtonClicked}
>
<Typography
className={recorderClasses.targetTimeDoneButtonTypography}
>
Done
</Typography>
</Button>
</Stack>
</div>
</Modal>
);
}

Answer 1

The problem is that you are doing the equivalent of event.target.value.target.value because you are calling event.target.value twice. That`s why it is returning undefined.
The first call is in your textField in the onChange callback:
onChange={(e) => props.handleMinuteSelectionChange(e.target.value)}
So you are already passing the value of the target component up and not the event. But then you are handling the value as it was the event in your handleMinuteSelectionChange
//Here in reality you have already the value, not the event
function handleMinuteSelectionChange(event) {
const minuteSelection = event.target.value;
//remaining code ...
}