A React component passing it's width and height to it's children

dimensions-passer.js

// Passes it's width and height to it's children
//
// Does *not* care for resize, since this event is only fired by root element.
// Could either listen to itself, or get notified by a provider to reduce
// listeners
class DimensionPasser extends Component {
  constructor(props) {
    super(props)

    this.state = { parentWidth: 0, parentHeight: 0 }
    this.wrapperRef = React.createRef()
  }

  componentDidMount() {
    this.setState({
      width: this.wrapperRef.current.clientWidth,
      height: this.wrapperRef.current.clientHeight
    })
  }

  render() {
    const childrenWithProps = React.Children.map(
      this.props.children,
      child => React.cloneElement(child, { ...this.state })
    )

    return (
      <div ref={this.wrapperRef}>{childrenWithProps}</div>
    )
  }
}