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 eg EURUSD with real time Ask and Bid Prices respectively eg 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>
       
  

Answer 1

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)
             });
           }
         }
       >