Do not use this in functional components

Docs > Code Analysis > Static Analysis Rules > Do not use this in functional components

Cette page n'est pas encore disponible en français, sa traduction est en cours.
Si vous avez des questions ou des retours sur notre projet de traduction actuel, n'hésitez pas à nous contacter.

Metadata

ID: jsx-react/no-this-in-component

Language: JavaScript

Severity: Error

Category: Error Prone

Description

In JavaScript, particularly in the context of React, the this keyword is not necessary in functional components. Functional components are simpler constructs that are stateless and do not have access to the this keyword. Using this in a functional component is erroneous and leads to bugs in your code.

To adhere to this rule, always refer to props directly in functional components. Instead of using this.props.foo, use props.foo. This ensures that you are accessing the props object directly, rather than trying to access it through this, which is not available in functional components.

Non-Compliant Code Examples

function Test(props) {
    return (
        <div>{this.props.foo}</div>
    );
}

Compliant Code Examples

function Test(props) {
    return (
        <div>{props.foo}</div>
    );
}