How to use promises with data from an external API in react native

Question

I'm fetching data from an external api. This data is currency pair e.g EURUSD with real time Ask and Bid Prices respectively e.g 1.17123 , 1.17150. The user of the application is therefore required to input a future price such that if the Ask or the Bid price reaches that price inputted by the user, a message is logged. I have tried using a promise but its outputting the price that the user has put inside the textinput immediately i run the app instead of checking if the price has reached the future price that the user is expecting to be alerted if it is reached. Below is my code:

//hook for the clicked currency pair

const [pricealert, setPricealert]  = useState(0)

function checkAlertCondition (){
  return new Promise((resolve, reject) => {
    if(pricealert >= {...data.prices.AskPrice})
    {
      resolve({
        Pair: {...data.prices.instrument},
        message: "Price" + pricealert + "Has been hit"
      });
    } else if (pricealert <= {...data.prices.BidPrice}) {
      resolve({
        Pair:{...data.prices.instrument},
        message: "Price" + pricealert + "has been hit"
      });
    } else {
      reject ("Create Alert")
    }
  });
}

checkAlertCondition()
.then((message) => {
  console.log(message)
  .then((message) => {
    console.log(message)
  })
  .catch(() => {
    console.log(err)
  })
})
      

 <Modal visible={modalopen} animationType={"fade"}>
   <View style={styles.modal}>
     <View>
       <Text style={{textAlign: "center", fontWeight: "bold"}}>
         {data.prices[clickedindex].instrument}
       </Text>
       <Text style={{textAlign: "center"}}>
         {data.prices.AskPrice}/{data.prices.BidPrice}
       </Text>
       <Card.Divider/>
       <View style={{ flexDirection: "row"}}>
         <View style={styles.inputWrap}>
           <TextInput
             style={styles.textInputStyle}
             value={pricealert}
             onChangeText = {(pricealert) => setPricealert(pricealert)}
             placeholder="Alert Price"
             placeholderTextColor="#60605e"
             numeric
             keyboardType='decimal-pad' 
           />
           </View>
         </View>   
         <TouchableOpacity
           style={styles.button}
           onPress={() => {
             if(pricealert.length < 7) {
               Alert.alert("Error", "Enter a valid price")
               return;
             } else if (pricealert.length > 7) {
               Alert.alert("Error", "Enter a valid price")
               return;
             }
             setModalOpen(false);checkAlertCondition()} }
           >
             <Text style={styles.buttonTitle}>OK</Text>
           </TouchableOpacity>
         </View>
       </View>
     </Modal>

Can you provide a minimal code example ? I don't get what you want to achieve — Hollyol, Oct 14 '20 at 08:41
There's too much code here to review the piece you're actually trying to focus on, and it's also missing a bunch of code apparently. I feel like you want us to focus on this `checkAlertCondition` function, but it's not clear at all where the `pricealert` variable comes from — TKoL, Oct 14 '20 at 08:43
@user23424 Don't you want to call the `checkAlertCondition.then(....` inside the `onPress` function ? I don't understand why it is outside — Hollyol, Oct 14 '20 at 09:11
That means it probably works (I mean the promise is either resolved or rejected), the `undefined` stuff is because of the chained `.then`, i don't think you need it. As stated [here](https://stackoverflow.com/questions/41336663/console-logresult-returns-object-object-how-do-i-get-result-name#answer-41336822), try to use `console.log(JSON.stringify(message));` — Hollyol, Oct 14 '20 at 09:38
Its now correctly showing the message. The remaining task is to ensure the `pricealert` meets both of the conditions in the if statement for the message to be logged. It was actually my main issue — user23424, Oct 14 '20 at 09:48
@user23424 - This is out of the scope of this question, you can post an other one for a different topic :) — Hollyol, Oct 14 '20 at 09:55

score 1 · Answer 1 · answered Oct 14 '20 at 09:54

You probably want to consume the promise inside the onPress function, like this:

       <TouchableOpacity
         style={styles.button}
         onPress={
           () => {
             if(pricealert.length < 7) {
               Alert.alert("Error", "Enter a valid price")
               return;
             } else if (pricealert.length > 7) {
               Alert.alert("Error", "Enter a valid price")
               return;
             }
             setModalOpen(false);
             checkAlertCondition().then((message) => {
               console.log(JSON.stringify(message));
             })
             .catch(() => {
               console.log(err)
             });
           }
         }
       >

How to use promises with data from an external API in react native

1 Answers1