ESLint - Component should be written as a pure function (react prefer/stateless function)

Question

ESLint is giving me this error on a react project.

ESLint - Component should be written as a pure function (react prefer/stateless function)

It poi

Answer 1

Two choices.

Temporarily disable warning

^{(Untested; and there are multiple ways to do this.)}

// eslint-disable-next-line react/prefer-stateless-function
export class myComponent extends React.Component {
  ...
}

Use a pure stateless component

The return value is what will be rendered (e.g., you're basically writing class-based component's render method:

export const myComponent = () => {
  return (
    // JSX here
  )
}

(Or use non-ES6 notation if that's your thing.)

For components like this with no other supporting logic I prefer the implicit return, e.g.,

export MyComponent = () =>
  

    // Stuff here
  

This is a matter of preference. I would say that you should follow React naming conventions, though, and keep all components starting with an upper-case letter.

^{ESLint may complain about missing parens around a multi-line JSX expressions, so disable that rule or use parens.}

If you need props, they're passed in as the argument to the function:

const MyComponent = (props) =>
  

    
  

export MyComponent

And you can destructure in the parameter as usual for convenience:

const MyComponent = ({ foo }) =>
  

    
  

This can make the implicit return a little easier if you were using local vars. You'll get an ESLint warning about missing PropTypes unless you declare them; since it's not a class you cannot simply use static propTypes in the class, they must be attached to the function (which many people prefer anyway).