Uncaught TypeError: render is not a function react-dom

The issue:

When we were working with React new Context API with provider and consumer we got into this issue. Usually a consumer expects a single child and that should a function.

The reason:

This is the issue that poped up when we tried to render multiple childrens from a consumer.

const AuthUser = () =>  (
    <AppContext.Consumer>
        <h1>This is ReactJS</h1>
        {(context) => {
        }
    </AppContext.Consumer>
);

A context consumer was rendered with multiple children, or a child that isn’t a function. A context consumer expects a single child that is a function. If you did pass a function, make sure there is no trailing or leading whitespace around it.

The solution

As the consumer expects one child as function, it needed to remove the h1 tag to fix this issue. As soon as we removed, HTML element(h1 tag) the issue was resolved.