I need to clear values of datePicker when selecting item of selection box in react js

Question

const startDateRef = useRef();
    
const dateFilter = (event) => {
  startDateRef.current.value = "";
} 

<Form.Group controlId="dob" ref={startDateRef}>
  <Form.Label>Start Date</Form.Label>

  <Form.Control
    ref={startDateRef}
    type="date"
    name="stDate"
    value={dateBetweenState.stDate}
    placeholder="Date of Birth"
    onChange={(e) => {
      handleChange(e);
    }}
  />

  <select
    type="text"
    className="form-select"
    name="stDate"
    onChange={(e) => {
      dateFilter(e.target.value);
    }}
  >
    <option value={0}>Choose...</option>
    <option value={7}>7 Days</option>
    <option value={14}>14 Days</option>
    <option value={30}>30 Days</option>
  </select>

...

This is my code segment. I just typed here relevant code only. actual code too long . Anyway here have date-picker and select-box . If picked date and then select item from selection box. I need to clear early picked data from data-picker . I just tried it from react ref . I did that from when select item onChange function work and it contains the ref assigns the value to clear. but it does not work.

Answer 1

did you try adding the value parameter in the tag?

or

are you trying to say this, you are trying to clear the value of the date picker, in terms of actual data in the useRef is updated but this is not being reflected on the UI? if so then there is a simple trick that I use for updating the UI forcefully try these method if it works:

remounting using useState and refreshing logic

const [refreshing, setRefreshing] = useState(false);

useEffect(() => {
  if(!!refreshing) {
    setRefreshing(false);
  }
}, [refreshing])

// this will update the state to refreshing as true and the above useEffect will immediately update the state to false
const refresh = () => {
  setRefreshing(true)
}

...

{!refreshing && <select
    ...
    onChange={(e) => {
      dateFilter(e.target.value);
    }}
  >
    ...
  </select>}