Navigate back to the homepage

how to pass parameter to a promise function in react js?

Infinitbility
React
August 1st, 2022 · 1 min read
how to pass parameter to a promise function in react js?

Hi Friends 👋,

Welcome To Infinitbility! ❤️

To pass parameters to a promise function in react js, create a parameter function and use promise in a function like the below example.

1var getNameById = function (id) {
2 return new Promise(function (resolve, reject) {
3 // ...
4 });
5};
6
7getNameById(3).then(function (res) {
8 console.log(res);
9});
10
11// output: "Stuff worked"

Today, I’m going to show you How do I pass parameters to a promise function in react js, as above mentioned, I’m going to use the above-mentioned syntax to create and use a promise function with a parameter.

Let’s start today’s tutorial how do you pass parameters to a promise function in react js?

React JS promise function with parameter example

Here we will create a parameter function and store it in a variable, in the function we will create a promise with a resolve & reject option where we will check if it is greater than 0 resolve promise or rejects.

1import React, { useState, useEffect } from "react";
2export default function App() {
3 const [str, setStr] = useState("");
4
5 useEffect(() => {
6 fetchFunction();
7 }, []);
8
9 const fetchFunction = async () => {
10 let res = await getNameById(3);
11 setStr(res);
12 };
13
14 const getNameById = (id) => {
15 return new Promise((resolve, reject) => {
16 if (id > 0) {
17 resolve("Stuff worked!");
18 } else {
19 reject(Error("It broke"));
20 }
21 });
22 };
23
24 return (
25 <div className="App">
26 <p>{str}</p>
27 </div>
28 );
29}

In the above example, i have call promise function and store response in a state. printed state in a screen.

I hope it helps you, All the best 👍.

Follow me on Twitter

Join our email list and get notified about new content

No worries, I respect your privacy and I will never abuse your email.

Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo Photoshop Guide

Tutorials

Categories

More articles from Infinitbility

how to pass parameter to a promise function in react native?

how to pass parameter to a promise function in react native?

An example of a pass parameter to a promise function in react native with step-by-step guide.

August 1st, 2022 · 1 min read
how to pass parameter to a promise function in typescript?

how to pass parameter to a promise function in typescript?

An example of a pass parameter to a promise function in typescript with step-by-step guide.

August 1st, 2022 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]