Reset input type date value ReactJS

Question

What i have in my project is a date picker with a reset button next to it, after user select date from date picker, the date picker will show the selected date. See this image if you have dont get it yet

And what i want is to reset the date value back to this by clicking reset button.

And here is my code

I did setting value back to null using useState hook onClick the button, using useRef hook, but nothing works. Any help?

Answer 1

Which datepicker package do you use? This example works with react-datepicker:

import DatePicker from "react-datepicker";

const [dateValue, setDateValue] = useState(null);

<DatePicker
    selected={dateValue}
    onChange={d => setDateValue(d)}
/>
<button onClick={() => setDateValue(null)}>Reset</button>

Answer 2

Avoid using null, and simply change the value to empty string

dateRef.current =  '';