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

Write your component as a stateless function:

export myComponent = () => { //stuff here };

There are actually two styles of defining components in React: Functional components (which are just functions from props to a React component) and class components.

The main difference between them is that class components can have state and lifecycle methods such as componentDidMount, componentDidUpdate, etc.

Whenever you don't need state of lifecycle methods, you should write your component as a stateless function, as stateless components are in general easier to reason about.

To write a functional component, you write a function that takes a single argument. This argument will receive the component's props. Consequently, you don't use this.props to access the component's props - you just use the function's argument.