Referring to this in React functional components would be an error because the components are just regular JavaScript functions and do
not have an object associated with them. Functional components receive their props as a first argument to the component function, so you can access
them directly, and it is a common practice to destructure them right away.
function UserProfile({firstName, lastName}){
return (
<div className="user">{firstName} {lastName}</div>
);
}
React also supports legacy class-based components, where this keyword refers to the component instance object, but this style of
writing components is no longer recommended, and mixing it with functional components will lead to errors.
function MyComponent(props){
const foo = this.props.bar; // Noncompliant: remove 'this'
return (
<div>{foo}</div>
);
}
To fix the issue, remove references to this from your functional component code. Make also sure you are not mixing functional and
class-based component styles.
function MyComponent({bar}){
const foo = bar;
return (
<div>{foo}</div>
);
}
