import React, { Component } from "react";
class App extends Component {
constructor() {
super();
this.state = { count: 0, name: "" };
}
handleChange = (e) => {
this.setState({ name: e.target.value });
};
increment = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<div>
<h2>React Class State Example</h2>
Name: <input value={this.state.name} onChange={this.handleChange} placeholder="Enter name" /><br/>
Hello, {this.state.name || "Guest"}!<br/><br/>
Count: {this.state.count} <button onClick={this.increment}>Increase</button>
</div>
);
}
}
export default App;
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter