title: Passing data from one component to another in React Native
body: <p>I am setting Sub Domain URL's for single app. Sub domain name will enter at the first time. it saves to the async storage and need to retrieve it from a common component</p>
  
  <p>Using the const, it's not working properly. </p>
  
  <p>Here is the partially completed code. baseURL and socketURL is needed inside another component function. How can I access these constants from there ?</p>
  
  <p>index_new.js</p>
  
  <pre><code>    import * as React from 'react';
      import { View } from 'react-native';
      import AsyncStorage from '@react-native-community/async-storage';
      import Login from "../screens/common/login/login/login";
  
      export default class App extends React.Component {
          constructor(props) {
              super(props);
  
              this.state = {
                  sub_domain: '',
              };
          }
  
          async getSchoolCode() {
              let sub_domain = '';
              try {
                  sub_domain = await AsyncStorage.getItem('SCHOOL_CODE') || ''
              } catch (error) {
              }
              return sub_domain;
          };
  
          async setSubdomain() {
              const sub_domain = await this.getschoolcode()
              await this.setState({ sub_domain })
          }
  
          getBaseUrl() {
              return `http://${this.state.sub_domain}.vidhyadhan.in:81/`;
          }
  
          getSocketIoUrl() {
              return `http://${this.state.sub_domain}.vidhyadhan.in:8080/`;
          }
  
          async componentDidMount() {
              await this.setSubdomain();
          }
  
          render() {
              const baseUrl = this.getBaseUrl();
              const socketIoUrl = this.getSocketIoUrl();
              const extraProps = {
                  baseUrl,
                  socketIoUrl
              }
  
              return (
                  &lt;View&gt;
                      &lt;Login {...extraProps} /&gt;
                  &lt;/View&gt;
              )
          }
      }
  </code></pre>
  
  <p>Login.js</p>
  
  <pre><code>    import React, { Component } from 'react'
      import {
          Alert,
          Keyboard,
          Text,
          View,
          TextInput,
          TouchableHighlight,
          Image,
          ActivityIndicator,
          StatusBar,
      } from 'react-native'
      import config from "../../../../config";
      import styles from './style'
      import { Icon } from "react-native-elements";
      import Toaster from '../../../../components/toaster'
      import AsyncStorage from '@react-native-community/async-storage';
  
      class Login extends Component {
          constructor(props) {
              super(props);
              this.state = {
                  credentials: {
                      schoolcode: "",
                      email: "",
                      password: "",
                  },
                  loading: false,
                  school_code: '',
              };
          }
  
  
          async getschoolcode() {
              let school_code = '';
              try {
                  school_code = await AsyncStorage.getItem('SCHOOL_CODE') || ''
              } catch (error) {
              }
              return school_code;
          };
  
          updateText(text, field) {
              let newCredentials = Object.assign(this.state.credentials);
              newCredentials[field] = text;
              // setState should be done like this
              this.setState({
                  credentials: newCredentials
              })
  
              if(field == 'schoolcode'){
                  AsyncStorage.setItem('SCHOOL_CODE', text);
                  this.getschoolcode().then((keyValue) =&gt; {
                      this.state.school_code = keyValue;
                      console.log(this.state.school_code);
                  });
              }
          }
          async login() {
              Keyboard.dismiss();
              let credentials = this.state.credentials;
              if (this.state.credentials.schoolcode == '' || this.state.credentials.email == '' || this.state.credentials.password == '') {
                  Toaster.toast('Please Enter a valid UserName and Password', '#d30000')
              } else {
                  const that = this;
                  credentials.email = that.state.credentials.email;
                  this.setState({ loading: !this.state.loading });
                  const new_url = this.props.baseUrl;
                  fetch(config.baseURL + 'mobileapi/get_token/?username=' + `${that.state.credentials.email}` + '&amp;password=' + `${that.state.credentials.password}`, {
                      method: 'POST',
                      headers: {
                          Accept: 'application/json',
                          'Content-Type': 'application/json',
                      },
                      body: JSON.stringify({
                          credentials: credentials,
                      }),
                  })
                      .then((response) =&gt; response.json())
                      .then(responseJson =&gt; {
                          if (responseJson.confirmation === "success") {
                              AsyncStorage.setItem('USER_ID', responseJson.data.user_id.toString());
                              this.setState({ loading: !this.state.loading });
                              setTimeout(() =&gt; {
                                  this.props.navigation.navigate("Home")
                              }, 500);
                          } else {
                              this.setState({ loading: !this.state.loading });
                              setTimeout(() =&gt; {
                                  Toaster.toast('Please Enter a valid UserName and Password', '#d30000')
                                  // throw new Error(responseJson.message);
                              }, 500);
  
                          }
                      })
                      .catch((err) =&gt; {
  
                          //stop loading
                          this.setState({ loading: !this.state.loading });
  
                          setTimeout(() =&gt; {
                              if (JSON.stringify(err.message) === JSON.stringify('Network request failed')) {
                                  Toaster.toast('Please check your internet connection or try again later', '#d30000')
                              }
                          }, 500);
  
                      })
  
              }
          }
  
          render() {
              const loginText = (this.state.loading) ? 'Loading' : 'Login';
              return (
                  &lt;View style={styles.container}&gt;
                      &lt;StatusBar backgroundColor="#2383c9"
                                 translucent={true}
                                 hidden={false}/&gt;
                      &lt;Image source={require('../../../../assets/images/icons/logo.png')}
                          style={{ width: 99, height: 99, margin: 5, }} /&gt;
                      &lt;Text style={{ fontSize: 20, margin: 20, color: "#ffffff" }}&gt;Vidhyadhan&lt;/Text&gt;
  
                      &lt;View style={styles.inputContainer}&gt;
                          &lt;Image style={styles.inputIcon}
                                 source={require('../../../../assets/images/icons/username.png')} /&gt;
                          &lt;TextInput style={styles.inputs}
                                     placeholder="School-Code"
                                     underlineColorAndroid='transparent'
                                     onChangeText={text =&gt; {
                                         this.updateText(text, 'schoolcode')
                                     }} value={this.state.schoolcode}
                                     autoCorrect={false}
                                     autoCapitalize={"none"}
                          /&gt;
                      &lt;/View&gt;
  
  
                      &lt;View style={styles.inputContainer}&gt;
                          &lt;Image style={styles.inputIcon}
                              source={require('../../../../assets/images/icons/username.png')} /&gt;
                          &lt;TextInput style={styles.inputs}
                              placeholder="Username"
                              keyboardType="email-address"
                              underlineColorAndroid='transparent'
                              onChangeText={text =&gt; {
                                  this.updateText(text, 'email')
                              }} value={this.state.email}
                              autoCorrect={false}
                              autoCapitalize={"none"}
                          /&gt;
                      &lt;/View&gt;
                      &lt;View style={styles.inputContainer}&gt;
                          &lt;Image style={styles.inputIcon}
                              source={require('../../../../assets/images/icons/password.png')} /&gt;
                          &lt;TextInput style={styles.inputs}
                              placeholder="Password"
                              secureTextEntry={true}
                              underlineColorAndroid='transparent'
                              onChangeText={text =&gt; {
                                  this.updateText(text, 'password')
                              }}
                              value={this.state.password}
                              autoCorrect={false}
                              secureTextEntry /&gt;
                      &lt;/View&gt;
  
                      &lt;TouchableHighlight style={[styles.buttonContainer, styles.loginButton]}
                          onPress={this.login.bind(this)} &gt;
                          &lt;View style={{ justifyContent: 'center', flex: 1, flexDirection: 'row' }}&gt;
                              {this.state.loading === false ?
                                  &lt;Icon name='login' type='entypo' size={16} color='white' /&gt; :
                                  &lt;ActivityIndicator size="small" color="#ffffff" /&gt;}
                              &lt;Text style={styles.loginText}&gt; {loginText} &lt;/Text&gt;
                          &lt;/View&gt;
                      &lt;/TouchableHighlight&gt;
                  &lt;/View&gt;
              );
          }
      }
  
      export default Login;
  
  
  </code></pre>