Class components confusion

[hamzaDev654]

I am humbly request to you that kindly converts examples Class based to functional based as it would be much better for understanding Thank you .

[Souravkkt0404]

//class based import React, { Component } from 'react';

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

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

render() { return (

Count: {this.state.count}

<button onClick={this.increment}>Increment

); } }

export default Counter;

//function based import React, { useState } from 'react';

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

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

return (

Count: {count}

<button onClick={increment}>Increment

); };

export default Counter;

[srd11]

Using function based ,useState hook

import React, {useState} from 'react'
const Message = () => {
    const [message,setMessage] = useState('Welcome visitor');
    const changeMessage = () => {
        setMessage('Thank you for visting!');
    }

    return(
        <div>
            <h1>{message}</h1>
            <button onClick = {() => changeMessage()}>Subscribe</button>
        </div>
    )
}

Using class component same code.

import React, { Component } from 'react'

class Message extends Component{
    constructor() {
        super()
        this.state = {
            message: 'Welcome visitor'
        }
    }

    changeMessage() {
        this.setState({
            message: 'Thank you for visting! '
        })
    }

    render() {
        return (
        <div>
            <h1>{this.state.message}</h1>
            <button onClick = {() => this.changeMessage()}>Subscribe</button>
        </div>
        );
    }
}

;

[oppabgnamdz]

Dear reply+ANQ7EA5O5ACOPWMIM67NXNODYWIKPEVBNHHGTMFSRE,

Thank you so much for contacting qweq.
We have received your e-mail message and we have already create a support ticket for this issue.
An agent will follow up with you as soon as possible and he/she will assist you for this issue.

Please note: This e-mail was sent from a notification-only address that cannot accept incoming e-mail.
Please do not reply to this message.
=================================================
Your message to us:

Using function based ,useState hook import React, {useState} from 'react' const Message = () => { const [message,setMessage] = useState('Welcome visitor'); const changeMessage = () => { setMessage('Thank you for visting!'); }

return(
    <div>
        <h1>{message}</h1>
        <button onClick = {() => changeMessage()}>Subscribe</button>
    </div>
)

}

Using class component same code. import React, { Component } from 'react'

class Message extends Component{ constructor() { super() this.state = { message: 'Welcome visitor' } }

changeMessage() {
    this.setState({
        message: 'Thank you for visting! '
    })
}

render() {
    return (
    <div>
        <h1>{this.state.message}</h1>
        <button onClick = {() => this.changeMessage()}>Subscribe</button>
    </div>
    );
}

}

;

—Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you are subscribed to this thread.Message ID: @.> [ { @.": "http://schema.org", @.": "EmailMessage", "potentialAction": { @.": "ViewAction", "target": "https://github.com/sudheerj/reactjs-interview-questions/issues/261#issuecomment-1915947299", "url": "https://github.com/sudheerj/reactjs-interview-questions/issues/261#issuecomment-1915947299", "name": "View Issue" }, "description": "View this Issue on GitHub", "publisher": { @.***": "Organization", "name": "GitHub", "url": "https://github.com" } } ]

[sudheerj]

@hamzaDev654 Thanks for the feedback. It is currently in progress to update them.