Use HOC as React Component

Question

I've got a HOC called withData .

I use it as withData(Component) .

And need also to wrap html code in HOC in the render in the route:

<Route path={`/${ROUTES.HOME}`}
       render={() => (
                      <withData>
                         <Layout className="big-head" addImg>
                            <Home />
                         </Layout>
                       </withData>
                      )} />

By convention of HOC, its name should be in camel case (withData). But to use HOC as component the name should be in pascal case (WithData). Warning using camel case:

Warning: <withUserData /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.

How to avoid this error with not changing the name in the HOC?

tried:

• const WithUserData = withUserData;
• const WithUserData =;

got errors.

Answer 1

Component name should be in CAPS: WithUserData.

If you use small caps it will consider it HTML tag like <p>, <h1> .

Try with component name as WithUserData, it will work.