javascript - Lifting a state; my closest ancestor is filled with a stack, how should I go about implementing?

Question

I am following along with https://reactjs.org/docs/lifting-state-up.html, and basically when it gets to the end, and they implement and complete the calculator class, I get confused. Most of the confusion comes because my app.js is mostly just a page that renders a stack, and the stack holds practically my whole app(I am not sure if this is good practice).

I am trying to take a users input and display it on the password page.

My main questions are;

1. Since app.js is my closest ancestor, I need to implement my states there to use them across my two components. How should I go about implementing this with the stack involved?
2. Once implemented, how would I call this state to display it?

Thank you guys for any help at all! It is greatly appreciated, way more than you know.

my Email page

constructor(props) {
    super(props);

    this.updateInputValue = this.updateInputValue.bind(this);

    this.state = {
      color1: '#A2A2A2',
      emailValue: '', //add state here
    };
  }

  updateInputValue = (event) => {
    this.props.onEmailInputChange(event.target.value);
}

navigateToCreatePasswordScreen = () => {
  this.props.navigation.navigate("CreatePassword", {
    inputValue: this.state.emailValue,
  });
};

  render() {

    const emailValue = this.props.emailValue;

    return (
        <View style={styles.containerMain}>
        
        {/* Email Input */}
      <Container style = {styles.emailInput}>
        
        <Form>
          <Item floatingLabel >
            <Label style={{color:this.state.color1}}>Email Address</Label>
                <Input
                value = {emailValue}
                onChange={(this.updateInputValue)}                
                style={styles.textInput}
                autoCorrect={false}
                autoCapitalize="none"
                onFocus={() => this.setState({color1: '#F7018D'})}               
                onBlur={() => this.setState({color1: '#A2A2A2'})}
                />
          </Item>
        </Form>
      </Container>

      <View style={styles.containerBottom}>   
      <ContinueButton
       onPress={() => this.navigateToCreatePasswordScreen()}
      /> 
      </View>

I have not implemented anything in my password page yet because I am unsure how to call the state once declared, but here is my app.js class that I have not made much progress in because I am confused.

app.js

constructor(props) {
  super(props);
  this.state = {emailValue: ''};
}

export default class App extends Component {
 
  createHomeStack = () =>
  <NavigationContainer>
  <Stack.Navigator>
  <Stack.Screen name="SplashScreen" component= {SplashScreenPage} options={{headerShown: false}}/>
    <Stack.Screen name="Welcome" component= {WelcomePage} options={{headerShown: false}}/>
    <Stack.Screen name="Login" component= {LoginPage} options={{headerShown: false}}/>
    <Stack.Screen name="SignUpEmail" component= {SignUpEmailPage} options={{headerShown: false}}/>
    <Stack.Screen name="CreatePassword" component= {CreatePasswordPage} options={{headerShown: false}}/>
    <Stack.Screen name="PhoneVerification" component= {PhoneVerificationPage} options={{headerShown: false}}/>
    <Stack.Screen name="Home" component= {HomePage} options={{headerShown: false}}/>
    <Stack.Screen name="YourName" component= {YourNamePage} options={{headerShown: false}}/>
    <Stack.Screen name="ProfilePicUpload" component= {ProfilePicUploadPage} options={{headerShown: false}}/>
    <Stack.Screen name="LikedPage" component= {LikedPage} options={{headerShown: false}}/>
  </Stack.Navigator>
  </NavigationContainer>
 
  render() {

    const emailValue = this.state.emailValue;

    return (
      <View style={styles.welcomeScreen}>
       {this.createHomeStack()}
      </View>
  
    )
  }
}

question from:https://stackoverflow.com/questions/65545862/lifting-a-state-my-closest-ancestor-is-filled-with-a-stack-how-should-i-go-abo

Answer 1

Waitting for answers