javascriptreactjsdatetimewarningsstrict-mode

findDOMNode is deprecated

On my site (written in React) I use a calendar so that the user can select a date and time range. For this I use the react-advanced-datetimerange-picker library.

Also in index.js file I use <React.StrictMode>. Because of this, when working with the library, I have some warnings. I would like to get rid of them.

I know the easiest way to remove <React.StrictMode>. But this is not entirely true. Below is a part of my code

    return (
      <DateTimeRangeContainer
        ranges={ranges}
        autoApply={true}
        start={time.start}
        end={time.end}
        local={local}
        applyCallback={handleDateRangeChange}
        forceMobileMode
        years={[2022, 2025]}
        style={styleRange}
      >
      </DateTimeRangeContainer>
  
  );

The whole problem lies in the DateTimeRangeContainer component. If I remove it, the warnings disappear. So here are the warnings I have:

react-dom.development.js:86 Warning: Legacy context API has been detected within a strict-mode tree. The old API will be supported in all 16.x releases, but applications using it should migrate to the new version. Please update the following components: FormControl. Learn more about this warning here: https://reactjs.org/link/legacy-context

and second..

react-dom.development.js:86 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of DateTimeRangeContainer which is inside StrictMode. Instead, add a ref directly to the element you want to reference. Learn more about using refs safely here: https://reactjs.org/link/strict-mode-find-node

Help me fix them

Solution

  • The issue is most likely because of an older version of react used in the library. One workaround is to use another library or another one is to wait for the author to update the library.

    I created an issue on the library repo. Please find it here