Preview:
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;
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