Breaking News: Grepper is joining You.com. Read the official announcement!

counter app in react class based component

Aryamitra Chaudhuri answered on June 29, 2022 Popularity 9/10 Helpfulness 4/10

answer counter app in react class based component

related counter example using classes react without jsx

counter app in react class based component

Comment

import React, { Component } from 'react'

export default class CounterAppClass extends Component {

    constructor(props) {
        super();
        this.state = {
            count: 0
        }
    }

    handleIncrease() {
        this.setState({
            count: this.state.count + 1
        })
    }

    render() {
        return (
            <div className='card'>
                <div className="card-body">
                    <h3 className='text-center mb-2'>Class based Component Counter</h3>
                    <h5>Count is: {this.state.count}</h5>
                    <button className='btn btn-primary w-100 mt-3' onClick={this.handleIncrease.bind(this)}>Increase</button>
                </div>
            </div>
        )
    }
}

Popularity 9/10 Helpfulness 4/10 Language javascript

Source: Grepper

Tags: counter javascript react-class-based-component

Link to this answer
Share Copy Link

Contributed on Jul 18 2022

Aryamitra Chaudhuri

0 Answers Avg Quality 2/10

Closely Related Answers

counter example using classes react without jsx

Comment

<script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
<div id='root'></div>
<script>
class Hello extends React.Component {
 constructor(props) {
        super(props)
        this.state = {
            count: 0
        }
    }

  render() {
    return React.createElement('div', null, React.createElement("button",{onClick: () => this.setState({ count: this.state.count + 1})}, "Inc "+ this.state.count));
  }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(React.createElement(Hello, {toWhat: 'World'}, null));
</script>

Popularity 6/10 Helpfulness 2/10 Language javascript

Source: Grepper

Tags: counter javascript jsx

Link to this answer
Share Copy Link

Contributed on Jun 29 2022

Koushil Italent

0 Answers Avg Quality 2/10

counter app in react class based component

Contents

More Related Answers

counter app in react class based component

Closely Related Answers

counter example using classes react without jsx

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.