Unable to render data from API in React Native

Question

I have an API as shown below:

[
{
"available_quantity": 500, 
"available_quantity_units": "Units", 
"product_name": "ABC", 
"product_price": "35.00", 
},
{
"available_quantity": 500, 
"available_quantity_units": "Units",  
"product_name": "XYZ", 
"product_price": "50.00", 
}
]

I am trying to display the data in React Native. The code for it is shown below:

  const showData = () => {
    kioskData.map((item, index) => {
      return (
        <View>
          <Text>{item.product_price}</Text>
        </View>
      );
    });
  };
    
  return (
    <View style={styles.container}>
      {loading ? (
        <ActivityIndicator size="large" color={COLORS.blue} />
      ) : (
        showData()
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

But the data is not displayed on the screen and there is no error as well. Please assist me to fix the issue. Thanks for your time in advance.

Answer 1

You forgot return component in map function:

kioskData.map((item, index) => {
  return <View>
    <Text>{item.product_price}</Text>
  </View>;
});