Closed hamzaDev654 closed 5 months ago
//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}
);
} }
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}
); };
export default Counter;
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>
);
}
}
;
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" } } ]
@hamzaDev654 Thanks for the feedback. It is currently in progress to update them.
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 .