How to handle clear button in a controlled range picker - ant design

Question

Getting this error when trying to clear the controlled Ant-design Range filter.

Invalid attempt to destructure non-iterable instance. In order to be iterable, non-array objects must have a Symbol.iterator method.

Here is my code.

function Demo() {
  const [startDate, setStartDate] = useState(null);
  const [endDate, setEndDate] = useState(null);

  const handleChange = (props) => {
    const [start, end] = props;
    setStartDate(start);
    setEndDate(end);
  };

  return (
    <RangePicker
      format={"DD-MM-YYYY"}
      value={[startDate, endDate]}
      onChange={handleChange}
    />
  );
}

I am expecting it to show no dates when cleared. ( Empty Range Picker )

Answer 1

Use an if else block inside handleChange function

When you clear the range picker, props is null.

You might be expecting it to be [null, null]

So this case should be handled separately as below.

 const handleChange = (props) => {
    if (props) {
      const [start, end] = props;
      setStartDate(start);
      setEndDate(end);
    } else {
      setStartDate(null);
      setEndDate(null);
    }
  };

Check this sandbox for the complete code snippet.