React: use ref to get width of MyComponent

App.jsx

render(
    <Container>
        <Row>
            <Col sm={3}>
                <MyComponent />
            </Col>
            <Col sm={9}>
                <MyComponent />
            </Col>
        </Row>
    </Container>,
    document.getElementById('root')
);

Components.jsx

class MyComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            offsetWidth: 0
        }
        this.resizeTimer = null; // Used for clearing timeouts in 'updateWidth'
        this.handleWindowResize = this.handleWindowResize.bind(this);
        this.updateWidth = this.updateWidth.bind(this);
    }

    componentWillMount() {
        // Set up an event listener to capture window resize events
        window.addEventListener('resize', this.handleWindowResize);
    }

    componentWillReceiveProps(nextProps) {
        if (this.element) {
            this.updateWidth(this.element.offsetWidth);
        }
    }

    componentWillUnmount() {
        // Be nice and clean up events when they are no longer needed
        window.removeEventListener('resize', this.handleWindowResize);
    }

    handleWindowResize() {
        // Cancel timeouts that are in progress when a new event triggers
        clearTimeout(this.resizeTimer);
        this.resizeTimer = setTimeout(() => {
            // Resizing is done, update state
            this.updateWidth(this.element.offsetWidth);
        }, 250);
    }

    updateWidth(offsetWidth) {
        this.setState({ offsetWidth });
    }

    render() {
        const divStyles = {
            width: '100%',
            backgroundColor: '#eee',
            textAlign: 'center'
        };
        return (
            <div style={divStyles} ref={(element) => {this.element = element }}>
                <span>My width is: {this.state.offsetWidth}px</span>
            </div>
        );
    }
}

const Container = props => (
    <div className="container">
        {props.children}
    </div>
);

const Row = props => (
    <div className="row">
        {props.children}
    </div>
);

const Col = props => (
    <div className={`col-sm-${props.sm}`}>
        {props.children}
    </div>
);

Notes.txt

I'm using a short setTimeout to prevent unneccesary updates while the window is being resized: https://css-tricks.com/snippets/jquery/done-resizing-event/