How do I convert a class component to a functional component in React?

How do I convert a class component to a functional component in React?

To convert a class component to a functional component, you need to remove the class syntax and use a function instead.

Can you show me an example?

Sure! Here's a simple example:

Before (Class Component):

class MyComponent extends React.Component {
  render() {
    return <div>Hello, World!</div>;
  }
}

After (Functional Component):

const MyComponent = () => {
  return <div>Hello, World!</div>;
};

What about state and lifecycle methods?

For state, you can use the useState hook, and for lifecycle methods, you can use the useEffect hook.

Can you give an example with state?

Absolutely! Here's how you can manage state:

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
};