app crashes because of Flat-List API calling

Question

I'm calling API and seeing the respective API values in the log, it shows me correct values, but when I try to set API in Flat list with the help of hooks my app crashes. I don't know the reason as I'm new in react native, so any help regarding this would be really appreciated. NOTE( If I'm displaying the values directly without flat list it won't cause any error)

function Item({ item }) {
    const navigation = useNavigation();   
  
      return (
        

        <TouchableOpacity style={styles.listItemBox}
        onPress={() => navigation.navigate('PatientDemographics')}
        >
          <View style={{flex:1}}>

            <Text numberOfLines={1} style={{ textAlign: 'left', fontSize: 25, color:"#075430", textAlign: 'center',fontFamily:"Montserrat-Regular"}}>{item.firstName}</Text>

        
            <TouchableOpacity style={[styles.smallRoundedBlueRoundedNoMargin,{marginTop:10,marginBottom:40}]}
                   onPress={() => navigation.navigate('PatientDemographics')} >
              <Text style={[styles.cardText,{fontSize: 18},{color: 'white'}]}>SELECT </Text>
            </TouchableOpacity>
      


              </View>


      
 
        </TouchableOpacity>
       
            );
    }

const SelectPatient = () => {

   
   let  numColumns = 4;
    const formatData = (data, numColumns) => {
     const numberOfFullRows = Math.floor(data.length / numColumns);
 
       let numberOfElementsLastRow = 8 - (numberOfFullRows * numColumns);
       while (numberOfElementsLastRow !== numColumns && numberOfElementsLastRow !== 0) {
         data.push({ key: `blank-${numberOfElementsLastRow}`, empty: true });
         numberOfElementsLastRow++;
        
       }
       return data;
     };
      
  // const navigation = useNavigation(); 

     const [isLoading, setLoading] = useState(true);
     const [patient, setPatient] = useState([]);
     const mrnum=89
  
     useEffect(() => {
     
      axios({
          method: 'get',
          url: `https://emr-system.000webhostapp.com/emrappointment/emrappointment/patient/search?mrnum=89&cnic=&qrcode=`,
        }).then((response) => {
  
              //Balance / transaction-list
              setPatient(response.data.result);
              console.log(response.data.result);
              console.log(patient[0].patientId);
  
        }).then(() => setLoading(false));
    }, []);
  
   
  
 

    
    return (
    
        <View style={styles.container}>
          <Header name="Select Patient" class= ""/>
          
      
            <UnitClerkHeader/>
            <PatientHeader/>
         <View style= {{flex:1 ,width: '100%', alignSelf: 'center'}}>
         <SafeAreaView style={{flex:1}} >
        <FlatList
  
          style={{flex:1, marginTop: 30, marginRight:30,marginLeft:30}}
          data={ formatData(patient,numColumns)}
          renderItem={({ item }) => <Item item={item}/>}
          keyExtractor={item => item.patientId}
          numColumns = {numColumns}
         
        /> 
        </SafeAreaView>
  

        </View>

        </View>
       
      
    
    );
  }
export default SelectPatient;

Answer 1

You can try with

<FlatList
  style={{ flex: 1, marginTop: 30, marginRight: 30, marginLeft: 30 }}
  data={() => formatData(patient, numColumns)}
  renderItem={({ item }) => <Item item={item} />}
  keyExtractor={item => item.patientId}
  numColumns={numColumns}
/>

I can help you better when you show your error too.