How to fix Constructor in class component does not call super(props) in React

// WRONG - no super call
class MyComponent extends React.Component {
  constructor(props) {
    this.state = { count: 0 }; // Error!
  }
}

// CORRECT - super(props) called first
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
}

// WRONG - super() without props
class MyComponent extends React.Component {
  constructor(props) {
    super(); // Missing props!
    this.state = { count: 0 };
  }
}

// CORRECT - props passed to super
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
}

// WRONG - this.props accessed before super
class MyComponent extends React.Component {
  constructor(props) {
    console.log(this.props); // Error!
    super(props);
  }
}

// CORRECT - super called first
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    console.log(this.props); // Now safe
  }
}

class MyComponent extends React.Component {
  constructor(props) {
    // 1. Call super first
    super(props);
    
    // 2. Now you can initialize state
    this.state = {
      count: 0,
      message: ''
    };
    
    // 3. Bind methods that use "this"
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }
  
  render() {
    return (
      <button onClick={this.handleClick}>
        Count: {this.state.count}
      </button>
    );
  }
}

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
    // No need to bind arrow function methods
  }
  
  // Arrow function - automatically bound
  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };
  
  render() {
    return <button onClick={this.handleClick}>Count: {this.state.count}</button>;
  }
}

// OLD - class component
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }
  
  handleClick = () => {
    this.setState({ count: this.state.count + 1 });
  };
  
  render() {
    return <button onClick={this.handleClick}>Count: {this.state.count}</button>;
  }
}

// NEW - function component with Hooks
function MyComponent() {
  const [count, setCount] = useState(0);
  
  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  );
}

npm install --save-dev eslint eslint-plugin-react

module.exports = {
  parser: "@babel/eslint-parser",
  plugins: ["react"],
  rules: {
    "react/no-this-in-sfc": "warn",
    "no-this-before-super": "error"
  },
  parserOptions: {
    ecmaVersion: 2021,
    sourceType: "module",
    ecmaFeatures: { jsx: true }
  }
};