react-measure icon indicating copy to clipboard operation
react-measure copied to clipboard

Failed prop type: Invalid prop `children` of type `object` supplied to `_class`, expected `function`

Open BenLorantfy opened this issue 6 years ago • 4 comments

I'm getting this warning in the console whenever I try to use this library. It works perfectly but it still spits out this warning.

Warning: Failed prop type: Invalid prop `children` of type `object` supplied to `_class`, expected `function`.

This is a simplified version of how I'm using it:

class Wrapper extends Rect.Component {
  componentWillRecieveProps() {
    console.log('contentRect', nextProps.contentRect); // This works fine
  }

  render() {
    return (
      <div ref={this.props.measureRef}>
         {this.props.children}
      </div>
    )
  }
}

const WithMeasure = withContentRect('bounds')(Wrapper);
<WithMeasure>
  <button>My Button</button>
</WithMeasure>

BenLorantfy avatar Mar 22 '18 12:03 BenLorantfy

you can wrap Measure in HOC:

import React from 'react';
import Measure from 'react-measure';

const withMeasure = measurments => BaseComponent => props => (
  <Measure {...[].concat(measurments).reduce((obj, m) => ({ ...obj, [m]: true }), {})}>
    {({ contentRect, measure, measureRef }) => (
      <BaseComponent {...props} {...{ contentRect, measure, measureRef }} />
    )}
  </Measure>
);

export default withMeasure;

and use it after:

withMeasure('bounds')(Component);
// or
withMeasure(['bounds', 'offset'])(Component);

kkir avatar May 08 '18 23:05 kkir

I'm getting this exact error message when invoking the withContentRect HOC.

const addPropsToChildren = (children, props) =>
	Children.map(children, child => cloneElement(child, props));

const Scrollbox = styled.div``;

const ScrollTracker = withContentRect("bounds")(
	({ measureRef, height, children }) => (
		<Scrollbox innerRef={measureRef}>
			{addPropsToChildren(children, { height })}
		</Scrollbox>
	),
);

As far as I can tell, I am using the HOC correctly, the onResize handler gets called and updates the state, height is correct and gets updated, everything seems to work - but I keep getting the proptype error.

gertsonderby avatar Jun 13 '18 13:06 gertsonderby

Looks like children propType should be added in Measure.jsx instead of with-content-rect.js I can send a PR

Hypnosphi avatar Jun 13 '18 15:06 Hypnosphi

I refactored to use the component instead, and got rid of the error.

gertsonderby avatar Jun 14 '18 11:06 gertsonderby