React warning when returning null in a renderProp function

[lo1tuma]

Follow-up of #2030.

Current behavior

When a renderProp function renders null I see the following react warning being logged at stdout:

Warning: Failed prop type: The prop `children` is marked as required in `SimpleSFCWrapper`, but its value is `null`.
    in SimpleSFCWrapper

Expected behavior

I wouldn’t expect to see such a warning since everything works just fine when using null. Also see the react documentation which says null can be used to render nothing.

Your environment

I’ve created a minimal example to reproduce this issue:

• run npm i react@16.8.3 enzyme@3.9.0 enzyme-adapter-react-16@1.11.2 react-dom@16.8.3
• create a file test.js which the following content:

'use strict';

const Enzyme = require('enzyme');
const Adapter = require('enzyme-adapter-react-16');
const React = require('react');

Enzyme.configure({ adapter: new Adapter() });

const { shallow } = Enzyme;

function MyComponent() {
    return React.createElement('div', {},
        React.createElement(ComponentWithRenderProp, {}, function () {
            return null;
        })
    );
}

function ComponentWithRenderProp(props) {
    return props.children();
}

const myComponent = shallow(React.createElement(MyComponent));

myComponent.find(ComponentWithRenderProp).renderProp('children')();

• run node test.js

API

• shallow
• mount
• render

Version

library	version
enzyme	3.9.0
react	16.8.3
react-dom	16.8.3
react-test-renderer	16.8.3
adapter (below)	1.11.2

Adapter

• enzyme-adapter-react-16
• enzyme-adapter-react-16.3
• enzyme-adapter-react-16.2
• enzyme-adapter-react-16.1
• enzyme-adapter-react-15
• enzyme-adapter-react-15.4
• enzyme-adapter-react-14
• enzyme-adapter-react-13
• enzyme-adapter-react-helper
• others ( )

Real-World Use-Case

In our project we use the Query component from apollo-client to perform GraphQL queries, handle the loading state and showing the data when it is ready. The children prop of Query is a renderProp function which gets the query state as an argument. The query state contains information about the loading state or if the data has been loaded it contains the data.
In some cases we just want to render nothing while the data is still loading.

Example:

// ... within a component
render() {
    return (
        <Query query={anyGraphqlQuery}>
            {({ loading, data }) => {
                 if (loading) { return null; }
                 return <div>{data.foo}</div>;
            }}
        </Query>
    );
}
// ...

[ljharb]

This should definitely work; it should produce effectively the same thing as const Foo = () => null; shallow(<Foo />).

[OmranAbazid]

I am getting the same error
Warning: Failed prop type: SimpleSFCWrapper: invalid value supplied to children. in SimpleSFCWrapper

when i return HTML element to the renderprop function:

             <Component
                formatter={(data, id) => {
                  const div = document.createElement('div');
                  return div;
                }}
              />

[ljharb]

@OmranAbazid because you can't render an HTML element in react; only a react element. Use React.createElement('div') instead.