I want to pick two time startTime and EndTime but the values we saved in useState changes start-Time in the place of EndTime and sometime the picker select auto value for startTime when i pick endTime and vice-versa.how can i manage the states and picker to only save one value at a time without changing value of second States
const [show, setShow] = useState(false);
const [fromTime, setFromTime] = useState(new Date());
const [toTime, setToTime] = useState(new Date());
const onFromTimeChange = (event, selectedFromTime) => {
const currentFrom = selectedFromTime || fromTime;
setShow(!show);
setFromTime(currentFrom);
};
const onToTimeChange = (event, selectedToTime) => {
const currentToTime = selectedToTime || toTime;
setShow(!show);
setToTime(currentToTime);
};
const showMode = (currentMode) => {
setShow(true);
setMode(currentMode);
};
const showFromTimepicker = () => {
showMode("time");
};
const showToTimepicker = () => {
showMode("time");
};
return ( <Text style={styles.workUkText}>
Job Availability (Select Hours)
</Text>
<View style={styles.ukWorkView}>
<Text style={styles.fromAvailability}>From</Text>
<View style={styles.fromTime}>
<TextInput
onTouchStart={showFromTimepicker}
style={{ fontWeight: "600", fontSize: 16 }}
value={moment(fromTime).format("HH : mm")}
onChangeText={onFromTimeChange}
/>
{show && (
<DateTimePicker
testID="dateTimePicker"
value={fromTime}
mode={mode}
is24Hour={true}
display="default"
onChange={onFromTimeChange}
/>
)}
</View>
<Text style={styles.fromAvailability}>To</Text>
<View style={styles.fromTime}>
<TextInput
onTouchStart={showToTimepicker}
style={{ fontWeight: "600", fontSize: 16 }}
value={moment(toTime).format("HH : mm")}
onChangeText={onToTimeChange}
/>
{show && (
<DateTimePicker
testID="TimePicker"
value={toTime}
mode={mode}
is24Hour={true}
display="default"
onChange={onToTimeChange}
/>
)}
</View>
)
.```
You are using same state show for both the picker. using an other show state will help solve your issue
or to do with a single state you can do something like this
const [show, setShow] = useState('none');
const [fromTime, setFromTime] = useState(new Date());
const [toTime, setToTime] = useState(new Date());
const onFromTimeChange = (event, selectedFromTime) => {
const currentFrom = selectedFromTime || fromTime;
setShow('none');
setFromTime(currentFrom);
};
const onToTimeChange = (event, selectedToTime) => {
const currentToTime = selectedToTime || toTime;
setShow('none');
setToTime(currentToTime);
};
const showMode = (currentMode,pickerType) => {
setShow(pickerType);
setMode(currentMode);
};
return ( <Text style={styles.workUkText}>
Job Availability (Select Hours)
</Text>
<View style={styles.ukWorkView}>
<Text style={styles.fromAvailability}>From</Text>
<View style={styles.fromTime}>
<TextInput
onTouchStart={()=>showMode("time","showFromPicker")}
style={{ fontWeight: "600", fontSize: 16 }}
value={moment(fromTime).format("HH : mm")}
onChangeText={onFromTimeChange}
/>
{show==="showFromPicker" && (
<DateTimePicker
testID="dateTimePicker"
value={fromTime}
mode={mode}
is24Hour={true}
display="default"
onChange={onFromTimeChange}
/>
)}
</View>
<Text style={styles.fromAvailability}>To</Text>
<View style={styles.fromTime}>
<TextInput
onTouchStart={()=>showMode("time","showToPicker")}
style={{ fontWeight: "600", fontSize: 16 }}
value={moment(toTime).format("HH : mm")}
onChangeText={onToTimeChange}
/>
{show==="showToPicker" && (
<DateTimePicker
testID="TimePicker"
value={toTime}
mode={mode}
is24Hour={true}
display="default"
onChange={onToTimeChange}
/>
)}
</View>
)