Can't use Pascal case when declaring a stateless functional component (SFC)

[nickytonline]

I'm currently having issues declaring SFCs when using the following tslint configuration:

{
  "extends": ["tslint-config-airbnb", "tslint-react", "tslint-config-prettier"]
}

and here is a sample component

import * as React from 'react';

const DummyComponent = () => <div>Hello World!</div>;

export default DummyComponent;

which results in the error

[tslint] variable name must be in lowerCamelCase or UPPER_CASE (variable-name)
const DummyComponent: () => JSX.Element

I know that it is the tslint-config-airbnb causing the issue, but I would have thought that tslint-react would have a rule for Pascal cased SFCs.

I think that this rule is missing. I'd be happy to throw up a PR if that's the case. I just need to read up a bit on creating rules.

[nickytonline]

For now, I'm doing this, but it's just a hack, as it allows people to write all vars as Pascal case.

{
  "extends": ["tslint-config-airbnb", "tslint-react", "tslint-config-prettier"],
  "rules": {
    // This rule is here for now because of https://github.com/palantir/tslint-react/issues/120
    "variable-name": [true, "ban-keywords", "check-format", "allow-pascal-case"]
  }
}

[subicura]

👍

[alexgorbatchev]

Also running into this. Bump.

[tomalexhughes]

Any update on this?

[tonghae]

Need some workaround too, to be used in pair with React project. Until then turned this rule off.

[haydencrain]

Would there be any way to allow PascalCase on a Stateless Component if it preceded by the React.RFC<P> type?

// will cause an error 
const DummyComponent = (props) => {
   return <div>Hello World!</div>;
};

// is allowed, as component is now typed
const DummyComponent: React.SFC<DummyComponentProps> = (props) => {
   return <div>Hello World!</div>;
};

[mellis481]

You can do this:

const dummyComponent = () => <div>Hello World!</div>;

export { dummyComponent as DummyComponent };

[maufarinelli]

my 2 cents @nickytonline
I had the same issue as you, but I changed my extends too

"extends": [
    "tslint:recommended",
    "tslint-config-airbnb-base",
    "tslint-react-recommended",
    "tslint-config-prettier"
  ]

and now it is fine
PS: tslint-config-airbnb-base is still work in progress as they say: https://github.com/nelsyeung/tslint-config-airbnb-base

[wtgtybhertgeghgtwtg]

I wouldn't limit it to functional components, since it'll complain about any react component assigned to a constant.

import React from 'react';
import styled from 'styled-components';

// Returns a `StyledComponent`.
const StyledBox = styled.div``;
// Returns a `LazyExoticComponent`.
const LazyBox = React.lazy(() => import('./Box'));
// Returns a `MemoExoticComponent`.
const MemoBox = memo(Box);

[antokara]

also happens with React Contexts
https://reactjs.org/docs/context.html

example from the documentation:

const ThemeContext = React.createContext('light');
...
<ThemeContext.Provider value="dark">
   <Toolbar />
</ThemeContext.Provider>
...

[Luxcium]

I dont know the problem but I found a solution ...

if I use:

// in ./app.ts
import MyComponent from './components/myComponent';

I get this:

Error : `Misnamed import. Import should be named 'myComponent' but found 'MyComponent'
(import-name)tslint(1)`

even with that:

{
  "extends": ["tslint:recommended", "tslint-config-airbnb", "tslint-config-prettier", "tslint-react"],
  // This rule is here for now because of https://github.com/palantir/tslint-react/issues/120
  "variable-name": [
    true,
    "ban-keywords",
    "check-format",
    "allow-pascal-case",
    "allow-leading-underscore",
    "allow-trailing-underscore"
  ]
}

I dont know if I am doing it right ?

this is my solution :

// in  ./components/myComponent.ts
export const myComponent = props => {
  /* ... using props somewhere in my function ... */
};
// in ./app.ts
import { myComponent as MyComponent } from './components/myComponent';

// or

// in  ./components/myComponent.ts
export default props => {
  /* ... using props somewhere in my function ... */
};
// in ./app.ts
import { default as MyComponent } from './components/myComponent';

[strongui]

Any progress on this? It's kind of a PIA to deal with this in react components.

[malisbad]

I think the AirBnb style guide explicitly states why this rule is in effect. You can turn if off if you like:

Class vs React.createClass vs stateless

[adidahiya]

I don't think type-aware variable naming is going to be added to tslint given the deprecation timeline (#210). Until now we've been happy with allowing pascal case for all variable names, so I consider that a sufficient workaround.