Conditional rendering in a promise 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:

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


      

 <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()
                  .then((message) => {
                    console.log(JSON.stringify(message) )
                    .catch((err) => {
                      console.log(err)
                    })
                    
                  });} }
           >
             <Text style={styles.buttonTitle}>OK</Text>
           </TouchableOpacity>
         </View>
       </View>
     </Modal>

Answer 1

Maybe you have two options, the first is to do your logic in onEndEditing of the TextInput or use useMemo of React, applying this logic you could have the following: