Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
BenLorantfy opened this issue Mar 22, 2018 · 4 comments

Comments

@BenLorantfy
Copy link

BenLorantfy commented Mar 22, 2018

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>
@kkir
Copy link

kkir commented May 8, 2018

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);

@gertsonderby
Copy link

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.

@Hypnosphi
Copy link
Contributor

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

@gertsonderby
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants