Cannot read property 'getBoundingClientRect' of null

Question

I get this error: Cannot read property 'getBoundingClientRect' of null. I use this function getBoundingClientRect, because in my project I want to have the following efect: at the moment one element is highlighted, the rest has different styles. The message shows the functions handleScroll. The component in which I use looks like this

class QuestionListItem extends Component {
  constructor() {
    super();
    this.state = {
      isActive: false,
    };

    this.handleScroll = this.handleScroll.bind(this);
  }

  componentDidMount = () => {
    window.addEventListener('scroll', this.handleScroll);
    this.handleScroll();
  };

  handleScroll = () => {
    const { isActive } = this.state;
    const { top } = this.wrapRef.getBoundingClientRect();
    if (top > 60 && top < 400 && !isActive) {
      this.setState({ isActive: true });
    }
    if ((top <= 60 || top >= 400) && isActive) {
      this.setState({ isActive: false });
    }
  }

  setWrapRef = (ref) => {
    this.wrapRef = ref;
  }

  render() {
    const { isActive } = this.state;
    const { question } = this.props;
    return (
      <div
        className={`Test__questions-item--noactive ${isActive && 'Test__questions-item--active'}`}
        ref={this.setWrapRef}
      >
        <li key={question.id}>
          <p>
            {question.question}
          </p>
          <QuestionAnswerForm name={question.question} />
        </li>
      </div>
    );
  }
}

Why is there such a mistake? Thanks for the help in advance :)

check this question stackoverflow.com/questions/29725828/… — Amir-Mousavi
– Amir-Mousavi, Commented Jan 4, 2019 at 15:42

Piyush Zalani · Accepted Answer · 2019-01-04 15:40:50Z

2

As I noticed your code, there you used arrow function with componentDidMount.

It should be:

componentDidMount() {}

also if you are using arrow function with handleScroll then there is no need to bind in the constructor, try to remove it and then modify the handleScroll as follows:

handleScroll = () => {
    const { isActive } = this.state;
    if (this.wrapRef) {
       const { top } = this.wrapRef.getBoundingClientRect();
       if (top > 60 && top < 400 && !isActive) {
          this.setState({ isActive: true });
       }
       if ((top <= 60 || top >= 400) && isActive) {
          this.setState({ isActive: false });
       }
    }
  }

Also remove function call this.handleScroll() after event listner in the componentDidMount as it is of no use.

edited Jan 4, 2019 at 15:40

answered Jan 4, 2019 at 15:29

Piyush Zalani

3,9641 gold badge17 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Elder Over a year ago

there is no error, however the state is not updated, styles do not change. As if the function handleScroll was not called

Piyush Zalani Over a year ago

@Elder handleScroll only called if there is a scrollbar in your current component, I have no idea of style but there should be fixed height on the div with overflow property so that it has a scrollbar as it is assigned to scroll event listener

Elder Over a year ago

yes its works. I add componentWillUnmount() { window.removeEventListener('scroll', this.handleScroll); } and everything is ok :)

Piyush Zalani Over a year ago

@Elder, please accept the answer if that helps you.

Amir-Mousavi · Accepted Answer · 2019-01-04 15:32:15Z

0

I think the problem is you have not created any ref for wrapRef. as the Error says cannot get the property of null; so the wrapRef itself is null

class QuestionListItem extends Component {
  constructor() {
    super();
    this.state = {
      isActive: false,
    };

    this.handleScroll = this.handleScroll.bind(this);
  }

  componentDidMount = () => {
    window.addEventListener('scroll', this.handleScroll);
    this.handleScroll();
  };

  wrapRef=React.createRef();

  handleScroll = () => {
    const { isActive } = this.state;
    const { top } = this.wrapRef.current.style;
    if (top > 60 && top < 400 && !isActive) {
      this.setState({ isActive: true });
    }
    if ((top <= 60 || top >= 400) && isActive) {
      this.setState({ isActive: false });
    }
  }

  render() {
    const { isActive } = this.state;
    const { question } = this.props;
    return (
      <div
        className={`Test__questions-item--noactive ${isActive && 'Test__questions-item--active'}`}
        ref={this.wrapRef}
      >
        <li key={question.id}>
          <p>
            {question.question}
          </p>
          <QuestionAnswerForm name={question.question} />
        </li>
      </div>
    );
  }
}

edited Jan 4, 2019 at 15:32

answered Jan 4, 2019 at 15:21

Amir-Mousavi

4,65315 gold badges79 silver badges135 bronze badges

3 Comments

Elder Over a year ago

I do not understand what I should change

Amir-Mousavi Over a year ago

Edited the Answer

Amir-Mousavi Over a year ago

also pay attention to ref={this.wrapRef} in your div

Francisco Jesus · Accepted Answer · 2022-10-27 11:50:25Z

0

Simply call the foo.getBoundingClientRect() inside a useEffect, which reads it when the component mounts. I was getting the same error.

answered Oct 27, 2022 at 11:50

Francisco Jesus

831 silver badge11 bronze badges

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

Cannot read property 'getBoundingClientRect' of null

3 Answers 3

4 Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related