Accessing user input upon button press

I am facing a challenge in displaying my emailInput on my createPassword page, specifically where [email protected] is mentioned. I have provided the code snippets for both pages below, the email page containing a user input and the password page where I intend the user input to be shown. I am struggling to understand how to reference the Input in my onPress function. Any assistance on this matter would be greatly appreciated!

Furthermore, is it possible to call two onPress functions like that? Or should I create two separate functions to achieve the desired functionality?

SignUpEmail.js

export default class SignUpEmailPage extends Component {
  
  constructor() {
    super();

    this.state = {
      color1: '#A2A2A2'};}
  
  render() {
    return (
        <View style={styles.containerMain}>
        
        {/* Email Input */}
      <Container style = {styles.emailInput}>
        
        <Form>
          <Item floatingLabel >
            <Label style={{color:this.state.color1}}>Email Address</Label>
                <Input
                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 = {() => navigation.navigate('CreatePassword', { emailInput:  })}
      onPress={() => this.props.navigation.navigate('CreatePassword')}
      /> 
      </View>

CreatePassword.js

export default class CreatePasswordPage extends Component {

  constructor() {
    super();

    this.state = {
      color1: '#A2A2A2'};}
  
  render() {
    return (
        <View style={styles.containerMain}>
       
         {/* Password Input */}
      <Container style = {styles.passwordInput}>
        
        <Form>
          <Item floatingLabel>
           <Label style={{color:this.state.color1}}>Password</Label>
              <Input
                style={styles.textInput}
                autoCorrect={false}
                autoCapitalize="none"
                secureTextEntry={true}
                onFocus={() => this.setState({color1: '#F7018D'})}
                
                onBlur={() => this.setState({color1: '#A2A2A2'})}
         
              />
         </Item>
       </Form>
      </Container>

        <View style={styles.containerHeader}>
        <Text style={styles.title}>Create a Password</Text>
        </View>
        
      <View style={styles.containerCaption}>   
        <Text style={styles.caption}> Lets create your Password for 
 
        </Text> 
      </View>
      <View style={styles.containerCaption2}>   
        <Text style={styles.caption}> <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ee97819b9c8b838f8782ae8b838f8782c08d8183">[email protected]</a></Text> 
      </View>

      

      <View style= {styles.backArrowPlacement}>
      <BackArrow 
      onPress={() => this.props.navigation.navigate('SignUpEmail')} 
      />
      </View>
      
      <View style={styles.containerBottom}>   
      <ContinueButton
      onPress={() => this.props.navigation.navigate('PhoneVerification')} 
      /> 
      </View>
    </View>

    );
    }
}

Answer №1

To successfully navigate in a functional component, the use of `navigation.navigate` requires the implementation of Hooks. Instead, in a class component, you can achieve the same functionality by following this structure:

export default class SignUpEmailPage extends Component {

    constructor() {
        super();

        this.state = {
            color1: '#A2A2A2',
            inputValue: '', // include state declaration
        };
    }

    updateInputValue = (evt) => {
        this.setState({
            inputValue: evt.target.value
        });
    }

    render() {
        return ( 
            <Input 
             value = {this.state.inputValue}
              onChange={this.updateInputValue }
            />           
            <ContinueButton
               //onPress = {() => navigation.navigate('CreatePassword', { emailInput:  })} // remove this
               onPress={() => this.props.navigation.navigate('CreatePassword',{ emailInput: this.state.inputValue })} // use this
            />

        )
    }
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unable to find 'react/lib/merge' module

I'm currently working on a React project and utilizing Babel and Webpack. Within one of my files, I have this require statement: var merge = require('react/lib/merge'); Unfortunately, I'm encountering the following error: ERROR in . ...

I keep getting double results from the Multiple Checkbox Filter

Currently, I am facing an issue with a checkbox filter on a product page that I'm developing. The filter is functioning correctly, but I encounter duplicate results when an item matches multiple criteria. For instance, if I select both 'Size 1&ap ...

A Guide on Accessing Promise Results in AngularJS

In my code, I am using a controller to retrieve information from SharePoint. While debugging, I noticed that the value of data.d.UserProfileProperties.results[115].Value is what I need to display in the view. However, I am struggling to extract that value ...

The Text Label in React native hooks is not properly updating when using Usestate, resulting in consistently displaying the same value

I have created a weekly calendar that displays Sunday to Saturday. The issue I'm encountering is that the text value is not updating even though it changes in console.log. I've attempted using state and setState but it didn't work! Any thoug ...

Special function to handle ajax requests malfunctioning

I am seeking to develop a unique function for AJAX post requests. Below is the existing source code: function handleAjax(url, data) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.st ...

Creating a dynamic multi-level menu within a hamburger menu

Tackling the challenge of creating a hamburger multi-level menu for a web page using CSS has proven to be quite tricky. The main issue I'm encountering is successfully incorporating a sub-menu to make it truly multi-level. Here's the progress I&a ...

Combining two numbers retrieved from Firebase using React

Hello, I am new to React and finding it challenging to perform mathematical calculations with React. I have been attempting to add two values retrieved from a Firebase database, but they keep displaying as strings without adding the actual values together. ...

Designing a captivating loading screen in Sencha Touch optimized for various mobile device resolutions

I am currently working with Sencha Touch 1.1 and I need my application to be compatible across various mobile platforms such as Android, iPhone, iPad, and Blackberry. One of the requirements is to have a splash screen at startup, which I have tried impleme ...

Issue with image display in Chrome caused by Flexbox styling

I recently set up a flexbox for my website, but I'm encountering an issue in Chrome. When the viewport is smaller than the width of two images, the entire site zooms out and everything gets distorted. However, this problem doesn't occur in Firefo ...

Tips for displaying all documents within a MongoDB collection using the sharedb-cli command line tool

My client-demo is not working as expected. I am trying to retrieve all documents from the "file" collection, but I am getting null results. https://i.sstatic.net/Pw6sA.png When testing with the mongo shell, I can see that the document data actually exist ...

What advantages and disadvantages come with choosing between using vh and vw for responsive text?

My main inquiry is centered around the various techniques for creating responsive text. Is there a particular method that stands out as the best option for general use, or do different methods serve distinct purposes? ...

The functionality of the combobox in Vuetify differs from that of an input field

I have implemented Vuetify and am using its combobox component for search functionality on my website. However, I have noticed that the text value in the combobox only gets added to the watcher when the mouse exits the field. This behavior is not ideal f ...

Customizing Navigation Color on Laravel Websites for Staging and Live Servers

I am seeking a solution to change the color of the Laravel navigation bar depending on whether it is the live or staging server. Our current setup involves testing code on a staging server before pushing it to the live server in production via Bitbucket. ...

Show special characters with accents within an SVG element on a webpage written in HTML

I'm having trouble with accented characters (like á, é, etc) not displaying in my SVG object on an HTML page. Here's how the page is declared: <!DOCTYPE html> <html lang="en"> <head runat="server"> <meta charset="utf-8 ...

I'm sorry, but we were unable to locate the /bin/sh

After running a command using execSync that runs with sh, I observed the following: spawnSync /bin/sh ENOENT bin is now included in the PATH environment variable. Any ideas on this issue? ...

Ways to increase the spacing between content boxes using Bootstrap

I currently have a row of three Bootstrap boxes structured like this: <div class="row"> <div class="col-lg-4 pathBoxMain"> <h2>Content</h2> </div> <div class="col-lg-4 pathBoxMain"> <h2>Content</h2> </di ...

There is no index signature that accepts a parameter of type 'string' in the type '{ [key: string]: AbstractControl; }'

I'm currently tackling a challenge in my Angular project where I am creating a custom validator for a reactive form. However, I've encountered an error within the custom validators function that I am constructing. Below you will find the relevan ...

Passing the onChange event in React to a nested child component

The code snippet below illustrates a scenario where the user encounters an error: import React from 'react'; import {render} from 'react-dom'; import Form from './form.jsx'; import axios from 'axios'; class App e ...

Display map.svg on the browser and execute a function when any area is clicked

Creating an online parking system that is compatible with desktop, iPad, and Android devices is my current project. I have a .svg formatted map for the parking area. I am looking for advice on how to display this map in a browser and execute JavaScript fu ...

Dynamic Wave Effects with jQuery

I'm interested in developing an interactive animation where waves emanate from a central point and trigger similar waves of varying sizes at outer nodes in a circular pattern. After researching, I came across a few libraries: https://github.com/mbos ...