Applying if else conditions after fetching data from an API in React Native

Question

I am fetching data from an API and displaying it. (This part is working). So to get a better overview of what I'm trying to do:

The user presses a button to take a test.
This will fetch alcohol and temperature from my API: which is like {"alcohol":291,"temperature":25}
If the alcohol and temperature are above a certain threshold give a tick or a cross along with the reading
Store this data in my Firestore as success or failure to do the test

The code:

import { StyleSheet, Text, View, ActivityIndicator, FlatList,TouchableOpacity } from 'react-native'
import React, { useEffect, useState } from 'react'
import { auth, database } from '../config/firebase';
import { collection, doc, setDoc } from 'firebase/firestore';
import { Alert } from 'react-native-web';

const url = "url";

function AlcoTestButton(){
  const [isLoading,setLoading] = useState(false);
  const [alcohol, setAlcohol] = useState();
  const [temperature, setTemperature] = useState();

  const fetchData= async ()=>{
    setTimeout(function(){
    setLoading(true)
    fetch(url)
      .then((response) => response.json())
      .then((json) => {
        setAlcohol(json.alcohol);
        setTemperature(json.temperature);
   
        //send to database
        const sensorID = doc(collection(database, 'sensors'));
        setDoc(sensorID,{
          uid: auth?.currentUser?.uid,
          alcohol,
          temperature,
        });
       

      })
      .catch((error) =>{alert(error)})
      .finally(()=>{setLoading(false)});
      
    },5000);  
    }

    const checkToxic = () => {
        if ({alcohol}>250){
            console.log("ALERT")
        }
    }




  return (
    <View style={styles.container}>
        <TouchableOpacity 
            onPress={()=>fetchData() && checkToxic()}
            style={styles.button}>
                <Text style={{ color: "white"}}>Take Test</Text>
        </TouchableOpacity>
        {isLoading && (<ActivityIndicator />)}
        {!isLoading && !!temperature && !!alcohol && 
           <View>
              <Text>Alcohol = {alcohol}</Text>
              <Text>Temperature = {temperature}</Text>
           </View>
        }
    </View>

  )


}

Any help or guidance would be much appreciated.

@UshanFernando It's an app for a breathalyzer (an IoT device) .. The user is taking a test. The mobile app is a way of interacting with the device. I wrote an API that takes reading from the sensors. When the user presses the button "Take Test", it retrieves this data from the JSON file. I'm trying to make an condition of : If the value of the alcohol sensor and the temperature sensor is greater than a certain threshold, it should display this to the user. In other words, you failed or you passed the test — Panda
– Panda, Commented Jul 25, 2022 at 18:11
can't you just use turnery operators and conditionally render it inside component? {alcohol > 250 ? <Text>Too High</Text : <Text>Good </Text> — Ushan Fernando
– Ushan Fernando, Commented Jul 25, 2022 at 18:21
@UshanFernando Like this? const checkToxic = () => { alcohol > 250 ? <Text>Too High</Text> : <Text>Good </Text> } — Panda
– Panda, Commented Jul 25, 2022 at 18:48

Md Nasim Uddin · Accepted Answer · 2022-07-25 17:51:30Z

1

you can try like this. Please import useEffect first.

useEffect(() => {
        if (alcohol>250){
            console.log("ALERT")
        }
    }, [alcohol]);

answered Jul 25, 2022 at 17:51

Md Nasim Uddin

111 bronze badge

Sign up to request clarification or add additional context in comments.

Comments

miknoup · Accepted Answer · 2022-07-25 23:49:48Z

0

You could use useMemo like this:

const checkToxic = useMemo(()=>{
    return alcohol > 250
},[alcohol])

Now checkToxic will be updated every time alcohol changes. You can use it to conditional render a component.

answered Jul 25, 2022 at 23:49

miknoup

3543 silver badges5 bronze badges

Collectives™ on Stack Overflow

Applying if else conditions after fetching data from an API in React Native

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related