How to Manage API Requests in React Native?

I am in the process of familiarizing myself with react native and attempting to communicate with an API helper that I have implemented within one of my screen files. While I suspect there may be a syntax error causing issues, I also wonder about the overall architecture of the setup given my background in iOS development.

Here is the function where the error occurs:

handleLoginPress = () => {
    ApiHelper.loginDriver(this.state.email, this.state.password)
      .then((result) => {
        console.log(result);
    }).catch((error) => {
        console.log("error is " + error);
    });
};

The encountered error reads as follows:

Property 'then' does not exist on type 'void'

This presents the function being called:

static loginDriver(username: string, password: string) {
    fetch('http://localhost:8080/drivers/login', {
         method: 'POST',
    headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        uername: username,
        password: password,
    }),
    });
}

My assumption leads me to believe that there might be a need for specifying the return type within the API's login function?

Answer №1

Ensure to include a return statement in your loginDriver function to correctly return the data.

static loginDriver(username: string, password: string) {
  return fetch('http://localhost:8080/drivers/login', {
    method: 'POST',
    headers: {
      Accept: 'application/json',
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({
      uername: username,
      password: password
    })
  });
}

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

Creating custom Moment.js plugins within an Ionic 2/Cordova project using TypeScript

In my Typescript Ionic 2 project, I am utilizing the moment.js library. To include it in my project, I use the following code snippet: import * as moment from 'moment'; Once imported, I can use moment in my component like so: let endDate = mom ...

What is the best way to create a type guard for a path containing a dynamic field

In certain scenarios, my field can potentially contain both a schema and an object where this schema is defined by key. How can a guard effectively tackle this issue? Below is an example of the code: import * as z from 'zod'; import type { ZodTy ...

Tips for managing update logic in the server side with sveltekit

Currently, I am using Sveltekit and I am facing a dilemma regarding updating input data. The actual update process is straightforward, but there is an issue that arises when trying to send an update API request immediately, as it requires an accessToken to ...

When a file is modified in Angular, it triggers an error prompting the need to restart the 'npm' service

Whenever I make changes to a file in my Angular application, I encounter the following error: ERROR in ./src/app/@theme/components/auth/index.js Module build failed: Error: ENOENT: no such file or directory, open 'C:\Dev\Ng\ngx-a ...

Utilizing TypeScript namespaced classes as external modules in Node.js: A step-by-step guide

My current dilemma involves using namespaced TypeScript classes as external modules in Node.js. Many suggest that it simply can't be done and advise against using namespaces altogether. However, our extensive codebase is structured using namespaces, ...

Establishing the correct data type to be returned from a fetch function in order to align with a specific custom type

My app has two interfaces defined: export interface Job { job_title: string, employer: string, responsibilities: string[] achievements: string[], start_date: string, end_date: string } export interface CreatedJob extends Job { ...

Associate keys with strings and then map them to a specific type of strings in Typescript

I am endeavoring to develop a React component that extends the Octicons icon library available from Github at @githubprimer/octicons-react. One of the components exported by the library is the iconsByName type, which has the following structure: type ico ...

Strange Node.js: I always avoid utilizing `require()`, yet encountered an unexpected error

For more information on this particular issue, please refer to this link It's quite puzzling as I haven't used the require() function in my code, yet I'm receiving an error telling me not to use it. How odd! The problematic code snippet i ...

Using Threejs to create an elbow shape with specified beginning and ending radii

I'm a beginner in Threejs and I'm attempting to create an elbow shape along a curved path with varying begin_radius and end_radius, using the curve_radius and an angle. However, I haven't been successful in achieving the desired results. C ...

Using TypeScript: Union Types for Enum Key Values

Here's the code in the TS playground too, click here. Get the Enum key values as union types (for function parameter) I have managed to achieve this with the animals object by using key in to extract the key as the enum ANIMALS value. However, I am s ...

Mastering the nesting of keys in Typescript.Unlock the secrets of

I encountered a situation where the following code snippet was causing an issue: class Transform<T> { constructor(private value: T) {} } class Test<T extends object> { constructor(private a: T) {} transform(): { [K in keyof T]: Transfo ...

What is the best way to globally install all necessary packages and dependencies?

Every time I create a new React app, a node_modules folder is generated with numerous packages under the app/project directory. If I create multiple apps, each one will have its own node_modules folder with thousands of packages. This leads to redundant no ...

When utilizing "ng2-file-upload" in conjunction with Angular 2 and Typescript, encountering a limitation where files larger than 1MB cannot be uploaded

My attempt to upload a file with a size exceeding 1MB is triggering an error regarding its large size. Despite setting the limit to 50 MB, it doesn't seem to be working as expected. Can someone please assist me in figuring out what I am doing incorrec ...

The Ionic mobile application fails to show any content on the screen

After following a tutorial by Josh Moroney on "Building a Review app with Ionic 2, MongoDB, and Node", I created a basic ionic app. However, when I run the app using the `ionic serve` command, it loads in the browser without any errors but displays a compl ...

Ways to verify whether a checkbox is selected and store the status in the LocalStorage

Hey there, I'm still new to the world of programming and currently just a junior developer. I have a list of checkboxes and I want to save any unchecked checkbox to my local storage when it's unselected. Below is a snippet of my code but I feel l ...

Implementing multiple condition-based filtering in React Native for arrays

I am looking to apply multiple filters to an array based on certain conditions defined by toggling switches. The issue arises when toggling two or more switches simultaneously, resulting in an empty array. My goal is to retrieve an array containing the tru ...

Exporting the default value from a TypeScript declaration file module

Imagine having a declaration file called foo.d.ts: declare namespace foo { interface Bar { (): void; } } declare var foo: foo.Bar; export default foo; Upon compilation: import Foo from './foo'; Foo(); The result is: "use strict"; va ...

Creating a dynamic type class in TypeScript that can inherit characteristics from another class

Can a wrapper class be designed to dynamically inherit the properties of another class or interface? For instance... interface Person { readonly firstName: string; readonly lastName: string; readonly birthday?: Date } class Wrapper<T> { ...

Trying to determine the specific key of an object based on its value in TypeScript?

Looking to create a function that can retrieve the key for a given value. type Items<T> = Exclude<{ [P in keyof T]: [P, T[P]]; }[keyof T], undefined>[]; export const getKeyName = <T extends Record<PropertyKey, unknown>, V>( col ...

Tips for creating a deepCss selector for an input Textbox in Protractor

When I attempt to use sendKeys in an input textbox with Protractor, the element is located within a shadow-root and there are three separate input textboxes. ...