How do I convert class components to functional components in React?

How do I convert class components to functional components in React?

To convert a class component to a functional component, you can follow these steps: 1. Remove the class declaration and extend from React.Component. 2. Replace the render method with a return statement. 3. Use hooks like useState and useEffect for state and lifecycle methods.

Can you show me an example?

Sure! Here's a simple example:

Class Component:

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

  componentDidMount() {
    console.log('Component mounted');
  }

  render() {
    return <div>{this.state.count}</div>;
  }
}

Functional Component:

import React, { useState, useEffect } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

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

  return <div>{count}</div>;
};

What about handling events in functional components?

In functional components, you can handle events similarly to class components. You define a function and pass it to the event handler. For example:

const handleClick = () => {
  setCount(count + 1);
};

return <button onClick={handleClick}>Increment</button>;