Adding ref to Reactstrap Jumbotron causes an error

Question

I'm trying to read the Jumbotron's height.

In order to do that, I followed this answer.

The only difference is that I'm applying the ref to a Reactstrap Jumbotron. So I added this code:

  <Jumbotron
    className="test"
    ref={ (divElement) => this.divElement = divElement}
  >

The result is this:

Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.

How should I overcome this problem?

score 0 · Answer 1 · answered Jan 29 '19 at 23:04

I just ran into this same issue, the problem is that ReactStrap uses functional components to render tags so you can't use refs on them. Just convert your jumbotron into a div without using react strap and it will work.

<div className="jumbotron" ref={this.divElement}></div>

Adding ref to Reactstrap Jumbotron causes an error

1 Answers1