Allow to specify displayName for createContext() providers and consumers

[budarin]

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

What is the current behavior?
in React tree name of a Context must be like its name in code

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:

const MyContext = React.createContext(null);

   <MyContext.Consumer>
   { data => ... }
   </MyContext.Consumer>

let's have a look at React tree in Chrome extention's page

here is Context - not MyContext

What is the expected behavior?

expexted to see MyContext

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

16.3.2

[gaearon]

React can't "guess" the name from the declaring code but we should probably make it possible to specify displayName manually for React DevTools.

[budarin]

Thanks 😃

[kaushik94]

@gaearon can I take this up?

[devmonkey22]

I think this is the paired React DevTools issue (facebook/react-devtools#1008)

[bvaughn]

Context providers and consumers support a custom display in React DevTools like so:

const ThemeContext = React.createContext("light");
ThemeContext.displayName = 'ThemeContext';

<ThemeContext.Provider> // "ThemeContext.Provider" in DevTools
<ThemeContext.Consumer> // "ThemeContext.Consumer" in DevTools