Estoy usando react-multi-date-picker para crear un programador de exenciones. El selector de fecha múltiple de reacción se usa dentro de una tabla de reacción de la siguiente manera:

 const [data, setData] = useState(0); const [dateValues, setDateValues] = useState({}); const columns = useMemo( () => [ { Header: "Exemptions", // First group columns columns: [ { Header: "Exemptions", accessor: "exemptions", Cell: ({ row, data }) => ( <DatePicker multiple key={data[row.index].id} onChange={(dateValues) => { const valueId = data[row.index].id; Object.keys(dateValues).map((key) => { setDateValues((oldArray) => ({ ...oldArray, [valueId]: { ...oldArray[valueId], [key]: dateValues[key] ?.toDate?.() .toISOString?.() .substring?.(0, 10), }, })); }); }} plugins={[<DatePanel />]} /> ), }, ], }, ], [] );

data produce un objeto a partir de una llamada axios con la siguiente estructura.

 (1) [{…}] 0: exemptions: null id: 1 name: "John Smith" user_supervisor: "Joe Black" [[Prototype]]: Object

Si tuviera que seleccionar 4 fechas del selector de fecha múltiple de reacción y después de mi llamada onChange en el gancho de memorización, me queda esto en los valores de fecha:

 {1: {…}} 1: 0: "2022-02-02" 1: "2022-02-03" 2: "2022-02-08" 3: "2022-02-08" [[Prototype]]: Object [[Prototype]]: Object

Todo esto funciona como se esperaba. Con lo que estoy luchando es con la eliminación de fechas del objeto dateValues cuando un usuario anula la selección de la fecha del selector de fecha múltiple de reacción. He intentado usar un ternario, he intentado usar .filter e .includes . Cada opción que he probado arroja un error diferente.

Estoy en un bloqueo mental sobre la lógica necesaria. Mis pensamientos han sido que necesito comparar el estado anterior con el nuevo estado y seguir haciendo coincidir los valores mientras descarto cualquier valor que no coincida entre los dos estados. Simplemente no puedo codificarlo de una manera que funcione. Cualquier ayuda en esto sería muy apreciada.