Bug when passing empty([] array) state to ranges props

[AadityaTailor]

Codesandbox : https://codesandbox.io/s/bqksq?file=/src/App

index.js:196 Uncaught TypeError: Cannot read property 'color' of undefined at DateRange.updatePreview (index.js:196) at onPreviewChange (index.js:223) at index.js:119 at HTMLUnknownElement.callCallback (react-dom.development.js:3945) at Object.invokeGuardedCallbackDev (react-dom.development.js:3994) at invokeGuardedCallback (react-dom.development.js:4056) at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4070) at executeDispatch (react-dom.development.js:8243) at processDispatchQueueItemsInOrder (react-dom.development.js:8275) at processDispatchQueue (react-dom.development.js:8288) at dispatchEventsForPlugins (react-dom.development.js:8299) at react-dom.development.js:8508 at batchedEventUpdates$1 (react-dom.development.js:22396) at batchedEventUpdates (react-dom.development.js:3745) at dispatchEventForPluginEventSystem (react-dom.development.js:8507) at attemptToDispatchEvent (react-dom.development.js:6005) at dispatchEvent (react-dom.development.js:5924) at unstable_runWithPriority (scheduler.development.js:468) at dispatchUserBlockingUpdate (react-dom.development.js:5894)

[EliasTouil]

Hello Aaditya, can you please give more information about what you are trying to achieve?

The date-range component throws an error when you don't give it a date-range, it seems like acceptable and expected behaviour to me.

[AadityaTailor]

In this

ranges={state}

I want to make above state=[]

export default function App() {
  const [state, setState] = useState([
    {
      startDate: new Date(),
      endDate: null,
      key: "selection"
    }
  ]);
  return (
    <div className="App">

      <DateRange
        onChange={item => setState([item.selection])}
        moveRangeOnFirstSelection={false}
        ranges={state}  // **<=This** 
      />
    </div>
  );
}

[EliasTouil]

Hello @AadityaTailor, thank you for refining your question

I cannot figure out why a list state breaks the package, but if you can handle state as an object instead of a list, you can go around the problem.

Here is a working example

import React, { useState } from "react";
import "./styles.css";
import { DateRange } from "react-date-range";
import "react-date-range/dist/styles.css";
import "react-date-range/dist/theme/default.css";

export default function App() {
  const [state, setState] = useState({
    startDate: null,
    endDate: null,
    key: "selection"
  }); // removed list
  return (
    <div className="App">
      <h1>react-date-range Example</h1>
      <DateRange
        onChange={(item) => setState([item.selection])}
        moveRangeOnFirstSelection={false}
        ranges={[state]} // added list here
      />
    </div>
  );
}