Attempting to access properties on this can sometimes be valid. But most of the time, it is an error caused by unfamiliarity with the differences between the two styles of components or a missed reference when converting a class component to an SFC. this is commonly used in stateful components to access the component's data like properties, states, methods, etc. Using this in the non-stateful component to access these data will throw runtime errors as these would be undefined.

In React, there are two types of components, i.e.,

1. Class Component It is called a stateful component as they tend to implement logic, and you can access props using this.props and state using this.state.

2. Functional Component It is also considered as Stateless Functional Components(SFCs), there's no state (hence the name - hooks do not change this), and the props and context are provided as its two functional arguments. In an SFC, the state is usually best implemented with a React hook such as React.useState().

Bad Practice

function Card(props) {
  return (
    <div>{this.props.heading}</div>
  );
}

// Example 2
function Card(props) {
  const { heading } = this.props;
  return (
    <div>{heading}</div>
  );
}

Recommended

function Card(props) {
  return (
    <div>{props.heading}</div>
  );
}

// Example 2
function Card(props) {
  const { heading } = props;
  return (
    <div>{heading}</div>
  );
}

References

• React: Class Component vs Functional Component
• React Components