Class Component

How to create class component

                
                  import React from 'react';
                  import {View, Text, Button } from 'react-native';
                  
                    class App extends React.Component {
                      render () {
                        return (
                          <View>
                            <Text> This is class component </Text>
                            <Button> Submit </Button>
                          </View>
                        );
                      }
                    }
                
            

State in Class Component

                
                    import React from 'react';
                    import {View, Text, Button } from 'react-native';
                  
                    class App extends React.Component {
                        constructor () {
                          super();
                          this.state = { // state declaration and initialization
                            count: 0
                          };
                        }
                        incrementCount () {
                          this.setState({
                            count: this.state.count + 1  // updating state using method
                          });
                        }
                        decrementCount () {
                          this.setState({
                            count: this.state.count - 1  // updating state using method
                          });
                        }
                        render () {
                          return (
                            <View>
                              <Text>Count: {this.state.count}</Text>
                              <Button onPress={this.decrementCount.bind(this)}>-</Button>
                              <Button onPress={this.incrementCount.bind(this)}>+</Button>
                            </View>
                          );
                        }
                    }
                
            

Props in Class Component

                
                    import React from 'react';
                    import {View, Text, Button } from 'react-native';
                    import HomeComponent from "./HomeComponent"; // Import home component here
                  
                    class App extends React.Component {
                      render () {
                        return (
                          <View>
                            <Text> This is class component </Text>
                            <HomeComponent name={'Saten Pratap'} /> // homecomponent and pass the prop name
                          </View>
                        );
                      }
                    }
                    export default App;
                
            

                
                    import React from 'react';
                    import {View, Text, Button } from 'react-native';
                  
                    class HomeComponent extends React.Component {
                      constructor (props) {
                          super(props);
                          this.state = { // state declaration and initialization
                            city: 'Mumbai';
                          };
                        }
                      render () {
                        return (
                          <View>
                            <Text> This is class component {this.props.name} </Text>
                          </View>
                        );
                      }
                    }
                    export default HomeComponent;