counter app in react using class component

Solutions on MaxInterview for counter app in react using class component by the best coders in the world

showing results for - "counter app in react using class component"
Fares
24 Jan 2020
1import React from 'react';
2
3import './App.css';
4
5// eslint-disable-next-line no-undef
6
7export default class Parent extends React.Component{
8  constructor(props){
9    super();
10    this.state={
11      value:0
12    }
13  }
14 
15execute1(){
16  this.setState({
17    value:this.state.value+1
18  })
19}
20
21execute2(){
22  this.setState({
23    value:this.state.value-1
24  })
25}
26  render(){
27    return(
28      <div>
29        <Child1 value={this.state.value} ></Child1>
30        <Child2 value={this.state.value}></Child2>
31        <button onClick={this.execute1.bind(this)}>click me</button>
32        <button onClick={this.execute2.bind(this)}>click me</button>
33
34      </div>
35    )
36  }
37}
38
39class Child1 extends React.Component{
40  
41  render(){
42    return(
43      <div className="modify">
44        <label>{this.props.value}</label>
45      </div>
46    )
47  }
48}
49
50class Child2 extends React.Component{
51  
52  render(){
53    return(
54      <div className="modify">
55        <label>{this.props.value}</label>
56      </div>
57    )
58  }
59}