How can I get a width of html element in React JS?

Question

I need to get a width of html element, using React JS. When I do console.log(this.widthPromoLine) in componentDidMount(), it works, but when I do this.setState({moveContent: this.widthPromoLine}), it doesn't.

import React from 'react'
import './index.css'

class Promo extends React.Component {


    constructor(props){
        super(props)
        this.state = {
            moveContent: 0
        }
    }
    
    componentDidMount(){
        this.setState({moveContent: this.widthPromoLine})
    }
    
    render(){
      return <div 
                className="promo-content" 
                ref={promoLine => this.widthPromoLine = promoLine.clientWidth}> 
             </div>
    }


}

.promo-content {
  width: 1870px;
}

Does this answer your question? How to get the width of a react element? — wentjun
– wentjun, Commented Jun 13, 2020 at 21:03

Hemant Parashar · Accepted Answer · 2020-06-13 21:07:30Z

4

Access the clientWidth after the ref has been assigned to the variable this.widthPromoLine in componentDidMount and then set it like below. Also setState is async, so you need to do anything after the state has been updated in the callback of setState.

import React from "react";
import "./styles.css";

class Promo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      moveContent: 0
    };
  }

  componentDidMount() {
    this.setState({ moveContent: this.widthPromoLine.clientWidth }, () => {
      console.log(this.state);
    });
  }

  render() {
    return (
      <div
        className="promo-content"
        ref={promoLine => (this.widthPromoLine = promoLine)}
      />
    );
  }
}

Hope this helps !

answered Jun 13, 2020 at 21:07

Hemant Parashar

3,7842 gold badges18 silver badges23 bronze badges

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

Comments

Engincan Veske · Accepted Answer · 2020-06-13 21:06:55Z

1

You can get the width of content using it classname as follow.

let width = document.querySelector(".promo-content").offsetWidth;

And after that update the state,

this.setState({moveContent: width})

answered Jun 13, 2020 at 21:06

Engincan Veske

1,6051 gold badge13 silver badges20 bronze badges

Collectives™ on Stack Overflow

How can I get a width of html element in React JS?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related