Functional component

How to create Functional component ?

                
                    import React from "react";
                    import { View, Button, Text, StyleSheet,StatusBar } from "react-native";
                    
                    const Home = () => {
                        return (
                            <View style={styles.main}>
                                <Text>This is functional component
                            </View>
                        );
                    };
                    const styles = StyleSheet.create({
                        main: {
                        flex: 1,
                        alignItems:'center',
                        justifyContent: "center",
                        
                        },
                    });

                    export default Home;
                
            

State in Functional Component

                
                  import React,{useState} from 'react';
                  import {View, Text, Button } from 'react-native';
                  import { View, Button, Text, StyleSheet,StatusBar } from "react-native";
                    
                  const Home = () => {
                    const [data, setData] = useState({name:'Ram', city:'Ayodhya'}); // state
                    // data is state
                    // setData is method to update data
                    
                      return (
                          <View style={styles.main}>
                              <Text>Name: {data.name}
                              <Text>City: {data.city}
                          </View>
                      );
                  };
                  const styles = StyleSheet.create({
                      main: {
                      flex: 1,
                      alignItems:'center',
                      justifyContent: "center",
                      
                      },
                  });
                  export default Home;
                
            

Props in Functional Component

                
                  import React,{useState} from 'react';
                  import { View, Button, Text, StyleSheet,StatusBar } from "react-native";
                  import Home from "./Home"; // Import home component here
                  
                  const App = () => {
                    const [data, setData] = useState({name:'Ram', city:'Ayodhya'}); // state
                    // data is state
                    // setData is method to update data
                    
                      return (
                          <View style={styles.main}>
                            <Home name={data.name} city={data.city} /> // home component and pass props
                          </View>
                      );
                  };
                  const styles = StyleSheet.create({
                      main: {
                      flex: 1,
                      alignItems:'center',
                      justifyContent: "center",
                      
                      },
                  });

                  export default App;
                
            

                
                  import React,{useState} from 'react';
                  import { View, Button, Text, StyleSheet,StatusBar } from "react-native";
                    
                  const Home = (props) => {
                    const {name, city} =  props;  // This is props, data is coming from App and props destructuring
                    
                      return (
                          <View style={styles.main}>
                            <Text>Name: {name}
                            <Text>City: {dcity}
                          </View>
                      );
                  };
                  const styles = StyleSheet.create({
                      main: {
                      flex: 1,
                      alignItems:'center',
                      justifyContent: "center",
                      
                      },
                  });

                  export default Home;