How to fix You attempted to use a hook in a class component in React

Error: Invalid hook call. Hooks can only be called inside 
of the body of a function component.
    at UserProfile.render (UserProfile.js:15)

class UserProfile extends React.Component {
  render() {
    const [name, setName] = useState(''); // ❌ Can't use hooks here
    return <div>{name}</div>;
  }
}

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  componentDidMount() {
    // ❌ Can't use hooks in lifecycle methods
    const [value, setValue] = useState(0);
  }

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Increment
        </button>
      </div>
    );
  }
}

function Counter() {
  const [count, setCount] = useState(0); // ✅ Hooks work in function components

  useEffect(() => {
    console.log('Component mounted');
  }, []);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increment
      </button>
    </div>
  );
}

class UserForm extends React.Component {
  state = {
    name: '',
    email: ''
  };

  handleChange = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  };
}

function UserForm() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');

  const handleChange = (e) => {
    if (e.target.name === 'name') setName(e.target.value);
    if (e.target.name === 'email') setEmail(e.target.value);
  };

  // Or use a single state object:
  const [formData, setFormData] = useState({ name: '', email: '' });

  const handleChange2 = (e) => {
    setFormData(prev => ({
      ...prev,
      [e.target.name]: e.target.value
    }));
  };
}

class DataFetcher extends React.Component {
  componentDidMount() {
    this.fetchData();
  }

  componentDidUpdate(prevProps) {
    if (prevProps.userId !== this.props.userId) {
      this.fetchData();
    }
  }

  componentWillUnmount() {
    this.cancelRequest();
  }

  fetchData() {
    // Fetch logic
  }
}

function DataFetcher({ userId }) {
  useEffect(() => {
    // componentDidMount + componentDidUpdate combined
    const controller = new AbortController();
    
    fetchData(userId, controller.signal);

    // componentWillUnmount cleanup
    return () => {
      controller.abort();
    };
  }, [userId]); // Re-run when userId changes

  const fetchData = async (id, signal) => {
    // Fetch logic
  };
}

// Custom hook you want to use
function useWindowSize() {
  const [size, setSize] = useState({ width: 0, height: 0 });
  
  useEffect(() => {
    const handleResize = () => {
      setSize({ width: window.innerWidth, height: window.innerHeight });
    };
    handleResize();
    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  }, []);
  
  return size;
}

// HOC that bridges hooks to class component
function withWindowSize(Component) {
  return function WrappedComponent(props) {
    const windowSize = useWindowSize(); // ✅ Hooks work here
    return <Component {...props} windowSize={windowSize} />;
  };
}

// Class component receives hook data as props
class MyClassComponent extends React.Component {
  render() {
    const { windowSize } = this.props;
    return <div>Width: {windowSize.width}</div>;
  }
}

// Export wrapped component
export default withWindowSize(MyClassComponent);

class InputFocus extends React.Component {
  constructor(props) {
    super(props);
    this.inputRef = React.createRef();
  }

  focusInput = () => {
    this.inputRef.current.focus();
  };

  render() {
    return <input ref={this.inputRef} />;
  }
}

function InputFocus() {
  const inputRef = useRef(null); // ✅ useRef replaces createRef

  const focusInput = () => {
    inputRef.current.focus();
  };

  return <input ref={inputRef} />;
}

// Example test with React Testing Library
import { render, screen, fireEvent } from '@testing-library/react';

test('Counter increments', () => {
  render(<Counter />);
  const button = screen.getByText('Increment');
  fireEvent.click(button);
  expect(screen.getByText('Count: 1')).toBeInTheDocument();
});