findDOMNode is deprecated

Question

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

The library is so old, and it's using React 15.6. At that time, findDOMNode was okay but after react 16 and a while, they deprecated both `findDOMNode` and old context API. the only way to fix the warnings is to refactor `react-advanced-datetimerange-picker` to a newer react version and remove the use of `findDOMNode`. — Abdollah Keshtkar, Jul 30 '22 at 15:28
@Paul, I suggest you use another date picker because fixing the warnings would be so much pain. You should fork the library from its GitHub repo, then update the code by removing the deprecated features and rewriting those parts to work correctly without using the deprecated features. — Abdollah Keshtkar, Aug 01 '22 at 10:32
@Paul, I haven't been around date pickers for a long time, but I think you can try react-multi-date-picker. It has a time range, but I suggest you search for another one that its repo active. — Abdollah Keshtkar, Aug 01 '22 at 11:27

score 3 · Accepted Answer · answered Aug 04 '22 at 10:19

3

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

answered Aug 04 '22 at 10:19

Atabic Umer

152
4

Thanks for the answer. What is required of me in this case? Just wait for an answer? – Paul Aug 05 '22 at 09:16
@Paul You might wait for a long time, authors dont have all the time in the world and sometimes old projects are just left as is. Maybe you're lucky though and they will fix it fast, but dont count on it. As another guy said, you could also go on their github, fork the entire repo, and update it yourself. Then you can remove the installed node_modules package, and have it bundled in your source code instead. Or submit a PR to the original library and hope they merge it. – Kim Skogsmo Aug 05 '22 at 12:22
You can opt for some other library here. One of the most common ones on npm is this https://www.npmjs.com/package/react-date-range. Check if this fulfills what you are looking for. Also sorry for the delayed response @Paul – Atabic Umer Aug 26 '22 at 12:28

findDOMNode is deprecated

1 Answers1