How to get width dynamically in react?

Question

Im trying with measure but doesn´t work.

 this.refs.tabla.measure(this._getWidth);

_getWidth(a,f,width,h,x,z){
  width = width + '';
  this.setState({width});
  console.log(width);

}

this is the error: index.js:20222 Uncaught TypeError: this.refs.tabla.measure is not a function

fabio.sussetto · Accepted Answer · 2016-05-11 12:50:20Z

2

If you have a ref to the element, you can do this.refs.myelem.clientWidth (which is zero for elements with no CSS or inline layout boxes) or maybe better this.refs.myelem.getBoundingClientRect().width Not sure where that measure method should be coming from.

It can be helpful to remember that React provides a standardised DOM implementation, which means you can normally work with React events and DOM element as if you were dealing with "standard" Js DOM node and events. Both getBoundingClientRect and clientWidth are available on standard DOM nodes too, nothing magic related to React.

edited May 11, 2016 at 12:50

answered May 11, 2016 at 12:42

fabio.sussetto

7,0653 gold badges28 silver badges38 bronze badges

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

3 Comments

kwelch Over a year ago

For the record there is nothing react about this nor should there be. The best location to make this call would be in the componentDidMount and componentDidUpdate that way you can ensure that the component is done rendering and catches the update case for new props that may change width.

fabio.sussetto Over a year ago

true, note also that works under the assumption the width won't change on window resize for example.

kwelch Over a year ago

Agreed for appropriate documentation on this refer to the React docs. facebook.github.io/react/tips/dom-event-listeners.html

Collectives™ on Stack Overflow

How to get width dynamically in react?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related