Cannot read property 'color' of undefined

[musamaalvi]

Subject of the issue

Its crashing in one of the functions of react-date-range. It seems on this line inside

 var color = ranges[focusedRange[0]].color || rangeColors[focusedRange[0]] || color;

[BUG] Bug Reproduce Steps

Just installed
npm install react-date-range -save

import 'react-date-range/dist/styles.css'; // main css file
import 'react-date-range/dist/theme/default.css'; // theme css file

export default function Dashboard() {
  const [state, setState] = useState([
    {
      startDate: new Date(),
      endDate: null,
      key: 'selection'
    }
  ]);

  const [sentimentData] = useClientComparisonSentiment();
  const [intentData] = useClientComparisonIntent();
  const [emotionData] = useClientComparisonEmotion();

  return (
    <React.Fragment>
      <DateRange
        editableDateInputs={true}
        onChange={(item: any) => setState([item.selection])}
        moveRangeOnFirstSelection={false}
       
      />

    </React.Fragment>
  );
}

It gives me below mentioned error when simply project is run and clicked on date range anywhere.

index.js:182 Uncaught TypeError: Cannot read property 'color' of undefined
    at DateRange.updatePreview (index.js:182)
    at onPreviewChange (index.js:209)
    at index.js:122
    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:646)
    at runWithPriority$1 (react-dom.development.js:11276)
    at discreteUpdates$1 (react-dom.development.js:22413)
    at discreteUpdates (react-dom.development.js:3756)
    at dispatchDiscreteEvent (react-dom.development.js:5889)

[BUG] Expected behaviour

Environment

Package Version:
TypeScript version: 4.2.3
React version: 17.0.1
Node version: 16.10
Browser: Chrome

[kamyar]

does replacing the line with

const color = ranges[focusedRange[0]]?.color || rangeColors[focusedRange[0]] || color;

solve the problem?

[sujatha018]

Same version i have used but still same issue ,"cannot read properties of undefined reading color" in react-date-range , how to resolve this .

[Dev-Sharma-197]

Have you been able to solve this problem?

[rogergarciaz]

I'm facing the same issue

[AshwinAnand868]

Is anyone able to resolve the issue?

[MuhammadAbuBakarr]

I was stuck in the issue for so long but I find out that You can Specify the color in range

const CustomDatePicker = () => {
const [state, setState] = useState([
{
startDate: new Date(),
endDate: new Date(),
key: "selection",
color: "#010E48", // Specify the color in the range array
},
]);
return (
<DateRangePicker
onChange={(item) => setState([item.selection])}
showSelectionPreview={true}
moveRangeOnFirstSelection={false}
months={2}
ranges={state}
direction="horizontal"
/>
);
};