Using an API response to trigger a modal - reactjs

Question

I'm attempting to use the response from my API (the response being a number ranging from -3 to +3) to trigger a modal. I receive a response from the API and store the number in a state var setModalVisible which I thought would cause the modal to appear however it does not. Eventually I would like varying modals to appear dependent upon the number, i.e if (response < 3) { certainModal } else { } however I can't get this initial one to render.
Below is a snippet containing the most relevant code:
async function makePostRequest (diaryText) {
let payload = { description: diaryText };
let response = await axios.post('http://localhost:3000/', payload);
let data = response.data.replace(/[^0-9+\/*=\-.\s]+/g, '');
return data;
}
makePostRequest(diaryText)
.then(response => {
this.setState({ setModalVisible: response });
})
.catch(error => {
error.message;
})
const [modalVisible, setModalVisible] = useState(false);
return (
<View style={styles.centeredView}>
<Modal
animationType="slide"
transparent={true}
visible={modalVisible}
onRequestClose={() => {
Alert.alert("Modal has been closed.");
setModalVisible(!modalVisible);
}}
>
<View style={styles.centeredView}>
<View style={styles.modalView}>
<Text style={styles.modalText}>Manderley thinks you are feeling good/okay/bad, is this correct?</Text>
<Pressable
style={[styles.YesButton, styles.YesButtonClose]}
onPress={() => setModalVisible(!modalVisible)}
>
<Text style={styles.textStyle}>Yes</Text>
</Pressable>
<Pressable
style={[styles.NoButton, styles.NoButtonClose]}
onPress={() => setModalVisible(!modalVisible)}
>
<Text style={styles.textStyle}>No</Text>
</Pressable>
</View>
</View>
</Modal>
</View>
)

Answer 1

I think the idea is you just need to check the value after you get the API response.
Let's say you have a function:
function checkAPIValue() {
const apiResponse = functionToCallAPI()
if (apiResponse.response < 3){
setModalVisible(true) // Here you change the value of your modalVisible
}
}