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

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

To convert a functional component to a class component, you need to create a class that extends React.Component and implement the render method.

Can you show me an example of that?

Sure! Here's a simple example:

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

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

What about state and lifecycle methods?

In a class component, you can manage state using this.state and lifecycle methods like componentDidMount can be used for side effects.

Can you give an example with state?

Absolutely! Here's an example:

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

    increment = () => {
        this.setState({ count: this.state.count + 1 });
    };

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