PropTypes for wrappedComponent

How do I set propTypes for isLoading (props of passed-in component)?

by Bernie Lee

HTML

<script src="https://unpkg.com/[email protected]/umd/react.development.js"></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/prop-types/prop-types.js"></script>
<div id="root"></div>

Babel + JSX

const Button = ({ onClick, className, children }) => (
  <button onClick={onClick} className={className} type="button">
    {children}
  </button>
);
Button.propTypes = {
  onClick: PropTypes.func.isRequired,
  className: PropTypes.string,
  children: PropTypes.node.isRequired,
};
Button.defaultProps = {
  onClick: () => {},
  className: '',
  children: 'Click me',
};

const Loading = () => (
  <div>
    <p>Loading...</p>
  </div>
);

const withLoading = Component => ({ isLoading, ...rest }) =>
  (isLoading ? <Loading /> : <Component {...rest} />);

// How do I set propTypes for isLoading?
// I tried this but it didn't work:
// withLoading.propTypes = {
// isLoading: React.PropTypes.bool
// };

const ButtonWithLoading = withLoading(Button);

// The rendered component is based on this boolean.
// isLoading === false:  <Button /> is rendered
// isLoading === true:   <Loading /> is rendered
const isLoading = false;

ReactDOM.render(
  <ButtonWithLoading isLoading={isLoading} onClick={() => alert('hi')}>Click Me</ButtonWithLoading>,
  document.getElementById('root')
);