I used with Countup and VisibilitySensor, got "the prop is marked as required in 'countup'.." and "findDOMNode is deprecated in StrictMode..."error

Question

import CountUp from "react-countup";
import VisibilitySensor from 'react-visibility-sensor';


function ... () {

 <CountUp end={number.blah(get from api)} redraw={true}>
   {({ countUpRef, start }) => (
      <VisibilitySensor onChange={start} delayedCall>
         <span ref={countUpRef} />
       </VisibilitySensor>
   )}
 </CountUp>

}

I didn't use hooks, just used them directly in the main component.

Warning: Failed prop type: The prop end is marked as required in CountUp, but its value is undefined.

Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of VisibilitySensor which is inside StrictMode. Instead, add a ref directly to the element you want to reference.

These are the errors that occurred and how can I fix them please help

score 0 · Answer 1 · answered May 23 '22 at 10:14

Saw this solution on a previous post

https://stackoverflow.com/a/71312117/1175555

And then I implemented it in this way

const { ref: slide1Ref, inView: slide1InView } = useInView();

And then the contents like

      <Swiper
        pagination={{
          clickable: true
        }}
        modules={[Pagination]}
        className={styles.swiper}
      >
        <SwiperSlide>
          <div className={styles.slide1} ref={slide1Ref}>
            {slide1InView && (
              <div>
                contents here
              </div>
            )}
          </div>
        </SwiperSlide>

This way, everytime I reach one of the slides, the countUps start working with no findDOMNode warnings. Like you I was using the now unmaintained VisibilitySensor

It works very well and with no issues.

Any questions, let me know!

I used with Countup and VisibilitySensor, got "the prop is marked as required in 'countup'.." and "findDOMNode is deprecated in StrictMode..."error

1 Answers1