passing React.createContext() mistakenly as if it were an element causes confusing error

Do you want to request a feature or report a bug?

bug

What is the current behavior?

If you’re really tired and forget to use a Context.Provider, and instead use the Context as if it were a provider, React (understandably) freaks out, but the error message is confusing. i.e.:

import React from "react";
import ReactDOM from "react-dom";

const Context = React.createContext();

import "./styles.css";

function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <Context value={"oops"}>
        <div>duh</div>
      </Context>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

This results in the console looking something like (pasted from codesandbox):

Warning: 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.
Warning: 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 above error occurred in one of your React components:
Error in sandbox: 
TypeError: render is not a function
Could not consume error: 
Error {}

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn’t have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:

What is the expected behavior?

An error that (roughly paraphrased) says something along the lines of:

hey idiot, you're trying to use a context directly. You want to use context.Provider. Go take a shower and try again.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

16.3+

[gaearon]

Context itself is actually the same thing as Consumer (although that’s accidental and we wanted to change it to be a Provider later). So that’s why we expect a render function.

Maybe the first warning could be amended to be more suggestive about the causes.

[engprodigy]

https://github.com/facebook/react/pull/13829
Follow this pull request for update