Not able to display data after fetching from API

Question

I'm fetching data from API but not able to display "title" on my screen and when I cross-check my data by console.log it shows the correct information that "title" variable contains relevant value but couldn't able to display it.

Or is there any other way to fetch data from API and not display it through the Flat-list component?

  import React, { useState, useEffect } from "react";
    import {
      StyleSheet,
      Text,
      View,
      SafeAreaView,
      ActivityIndicator,
      FlatList,
    } from "react-native";
    
    // get data from this URL!
    const emrURL = "https://emr-system.000webhostapp.com/emrappointment/emrappointment/patient/search?mrnum=89&cnic=&qrcode=";
    
    const Api = () => {
      // managing state with 'useState'
      const [isLoading, setLoading] = useState(true);
      const [data, setData] = useState([]);
      const [title, setTitle] = useState([]);
     

      useEffect(() => {
        fetch(emrURL)
          .then((response) => response.json()) // get response, convert to json
          .then((json) => {
            setData(json.result);
            setTitle(json.status);
  
            console.log(data,title)
          })
          .catch((error) => alert(error)) // display errors
          .finally(() => setLoading(false)); // change loading state
      }, []);
    
      return (
        <SafeAreaView>
          {/* While fetching show the indicator, else show response*/}
          {isLoading ? (
            <ActivityIndicator />
          ) : (
            <View>
                <Text style={{color:'black'}}>{title}</Text>
              <View style={{ borderBottomWidth: 1, marginBottom: 12 }}></View>
              <FlatList
                data={data}
                keyExtractor={({ id }, index) => id}
                renderItem={({ item }) => (
                  <View style={{ paddingBottom: 10 }}>
                    <Text style={styles.movieText}>
                      {item.patientId}. {item.firstName}, {item.lastName}
                    </Text>
                  </View>
                )}
              />
      
            
            </View>
          )}
        </SafeAreaView>
      );
    };

    
    export default Api;

Answer 1

You are trying to display a boolean which JSX will ignore. https://reactjs.org/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored