react-fundamental-slides-code/setStateExampleCode.js at master · aamirpinger/react-fundamental-slides-code · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
//App.js


// ****************************************************************
//
// Run following one at a time
//
// ****************************************************************

// ****************************************************************
//
//       setState Object base update approach
//
// ****************************************************************

import React, { Component, Fragment } from 'react';

class App extends Component {
  state = {
    cityArray1: ["Karachi", "Lahore", "Peshawer", "Quetta"],
    cityArray2: ["Hyderabad", "Multan", "Gawader", "Mardan"],
  }

  render() {
    setTimeout(() => {
      // setState Object base update approach
      this.setState(
        {
          cityArray1: ["Pakistan", "USA", "Russia", "UK"]
        }
      )
    }, 3000)

    return (
      //You can also use <div> instead of <Fragment>
      <Fragment>
        <City cityArray={this.state.cityArray1} name="Aamir" />
        <City cityArray={this.state.cityArray2} name="Pinger" />
      </Fragment>
    )
  }
}

class City extends Component {

  render() {
    const cityArray = this.props.cityArray
    // you can also do like this
    //const { cityArray } = this.props

    return (
      //You can also use <div> instead of <Fragment>
      <Fragment>
        <ul>
          {
            cityArray.map((city) => <li key={city}> {city} </li>)
          }
        </ul>
        <h4> {this.props.name} </h4>
      </Fragment>
    )
  }
}
export default App;


// ****************************************************************
//
//       setState functional update approach
//
// ****************************************************************

// import React, { Component, Fragment } from 'react';

// class App extends Component {
//   state = {
//     cityArray1: ["Karachi", "Lahore", "Peshawer", "Quetta"],
//     cityArray2: ["Hyderabad", "Multan", "Gawader", "Mardan"],
//     number: 0,
//   }

//   render() {

//     setTimeout(() => {
//       // setState Functional update approach
//       this.setState((prevState) => (
//         {
//           cityArray1: ["Pakistan", "USA", "Russia", "UK"],
//           number: prevState.number + 1
//         })
//       )
//     }, 3000)

//     return (
//       //You can also use <div> instead of <Fragment>
//       <Fragment>
//         <City
//           cityArray={this.state.cityArray1}
//           name="Aamir"
//           number={this.state.number}
//         />
//         <City
//           cityArray={this.state.cityArray2}
//           name="Pinger"
//           number={this.state.number}
//         />
//       </Fragment>
//     )
//   }
// }

// class City extends Component {

//   render() {
//     const { cityArray, number, name } = this.props
//     // you can also do like this, but above is best practice
//     //const cityArray  = this.props.cityArray
//     //const number  = this.props.number

//     return (
//       //You can also use <div> instead of <Fragment>
//       <Fragment>
//         <ul>
//           {
//             cityArray.map((city) => <li key={city}> {city} </li>)
//           }
//         </ul>
//         <h4> {name} </h4>
//         <h1> {number} </h1>
//       </Fragment>
//     )
//   }
// }
// export default App;