State example in react native

• Create Components folder under src folder
• Add stateEXP.js file and add below Code

import React from "react";

import { Text, View } from "react-native";

class stateEXP extends React.Component {

  state = {

    myState: "Adi"

  };

  render() {

    return (

      <View>

        <Text>State example</Text>

        <Text> {this.state.myState}</Text>

      </View>

    );

  }

}

export default stateEXP;

• Open App.js file and update code as below

import React from 'react';

import { View,StyleSheet } from 'react-native';

import stateEXP from './src/components/stateEXP'

 const  App=()=> {

  return (

    <View style={styles.container}>

      <stateEXP/>

    </View>

  );

}

export default App;

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    paddingTop:80

  },

});

State From Parent To Child Class & Child Function in react js

• Create Components folder under src folder
• Add StateFromParentToChild.js file and add below Code

import React, { Component } from "react";

class StateFromParentToChild extends Component {

constructor() {

super();

this.state = {

name: "Adi"

};

}

render() {

return (

<div>

State From Parent To Child Class & Child Function

<div>Parent Class</div>

<JTP name={this.state.name} />

<PopsInFunEXP1 name={this.state.name} />

</div>

);

}

}

class JTP extends Component {

render() {

return (

<div>

<div>Child Class</div>

<div>Welcome to {this.props.name}</div>

</div>

);

}

}

function PopsInFunEXP1(props) {

return (

<div>

<div>Child Funtion</div>

<div>{props.name}</div>

</div>

);

}

export default StateFromParentToChild;

• Open App.js file and update code as below\

import React from "react";

import ReactDOM from "react-dom";

import StateFromParentToChild from "./components/StateFromParentToChild";

function App() {

return (

<div className="App">

<StateFromParentToChild />

</div>

);

}

const rootElement = document.getElementById("root");

ReactDOM.render(<App />, rootElement);

Output: