looking for some solutions? You are welcome.

SOLVED: Getting the height of an imported component

Carl Binalla:

How to get the getBoundingClientRect() of an imported component? or at least access the elements inside

I can get it if it used inside the component itself:

constructor(props) {
    super(props);
    this.state = {
        height: 0,
    }
}

componentDidMount() {
    console.log(this.topNav.getBoundingClientRect());
}
render() {
    return (
        <nav ref={(elem) => this.topNav = elem} id="topNav" className="fixed-top navbar navbar-expand-md navbar-light bg-light">
            <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#sideNav" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
                <span className="navbar-toggler-icon"></span>
            </button>
            <a className="navbar-brand" href="/">Biometrics</a>
        </nav>

    )
}

But when used after importing that component in a different file:

constructor(props) {
    super(props);
    this.state = {
        height: 0,
    }
}

componentDidMount() {
    console.log(this.topNav);
}
render() {
    return (
        <FixedTopNavigation ref={(elem) => this.topNav = elem}/>
    )
}

Error received:

TypeError: this.topNav.getBoundingClientRect is not a function

After using console.log(), it seems that it is not returning the element anymore. All tutorials that I searched points to the first code syntax.

Also tried this.topNav = React.createRef(), but the error is still the same



Posted in S.E.F
via StackOverflow & StackExchange Atomic Web Robots
Share:

No comments:

Recent