Data is not rendering using Flatlist in react native

Question

I am fetching data from api and I am storing it in a state in a functional component if I am simply printing the data in a {data} it is showing all data in json format but it is not rendering using flatlist.

 
const PlantsBreedScreen = ({ navigation }) => {
const [data, setData] = useState([]);

useEffect(() => {
    fetchData();
}, []);

const fetchData = async() =>
{

    const request =  await axios.get('/obj/Category');
    setData(JSON.stringify(request.data.response.results));
    console.log(request.data.response.results);
    return request;
}

const Item = (props) => (
    <View style={styles.item}>
      <Text style={styles.title}>{props.title}</Text>
    </View>
  );
  
  const renderItem = ({ item }) => (
    <Item cName={item.cName} />
  );
  

return (
    <SafeAreaView style={styles.container}>
        <FlatList
        data={data}
        renderItem={renderItem}
        keyExtractor={item => item._id}
       /> 
    </SafeAreaView>
)
}
    
    
I am getting this data 

[
    {
        "cIcon":"//s3.amazonaws.com/appforest_uf/f1593211075844x987594468971699600/AirPlant.png",
        "cName":"AirPlant",
        "Created Date":"2020-06-12T03:50:32.293Z",
        "Created By":"1589332566210x919673080739546800",
        "Modified Date":"2020-06-26T22:37:58.122Z",
        "_id":"1591933832293x740470401637297400",
        "_type":"custom.category"
    },
    {
        "cIcon":"//s3.amazonaws.com/appforest_uf/f1593211065995x923166783941526000/Aquatic.png",
        "cName":"Aquatic",
        "Created Date":"2020-06-12T03:50:54.814Z",
        "Created By":"1589332566210x919673080739546800",
        "Modified Date":"2020-06-26T22:37:48.282Z",
        "_id":"1591933854814x594601779376298400",
        "_type":"custom.category"
    },
    {
        "cIcon":"//s3.amazonaws.com/appforest_uf/f1593211055775x815245486081858600/CacSucc.png",
        "cName":"CacSucc",
        "Created Date":"2020-06-12T03:51:08.824Z",
        "Created By":"1589332566210x919673080739546800",
        "Modified Date":"2020-06-26T22:37:37.763Z",
        "_id":"1591933868824x824580506688475900",
        "_type":"custom.category"
    },
    {
        "cIcon":"//s3.amazonaws.com/appforest_uf/f1593211046766x525372817880738000/Carnie.png",
        "cName":"Carnie",
        "Created Date":"2020-06-12T03:51:48.497Z",
        "Created By":"1589332566210x919673080739546800",
        "Modified Date":"2020-06-26T22:37:28.878Z",
        "_id":"1591933908497x739290661511488500",
        "_type":"custom.category"
    },
    {
        "cIcon":"//s3.amazonaws.com/appforest_uf/f1593211038814x188848007836712300/Flowery.png",
        "cName":"Flowery",
        "Created Date":"2020-06-12T03:52:02.800Z",
        "Created By":"1589332566210x919673080739546800",
        "Modified Date":"2020-06-26T22:37:20.613Z",
        "_id":"1591933922800x240413248643147620",
        "_type":"custom.category"
    },
    {
        "cIcon":"//s3.amazonaws.com/appforest_uf/f1593211030148x445996690624532700/Leafy.png",
        "cName":"Leafy",
        "Created Date":"2020-06-12T03:52:14.162Z",
        "Created By":"1589332566210x919673080739546800",
        "Modified Date":"2020-06-26T22:37:11.914Z",
        "_id":"1591933934162x408228620159180000",
        "_type":"custom.category"
    },
    {
        "cIcon":"//s3.amazonaws.com/appforest_uf/f1593211021175x413587314607428300/Exotic.png",
        "cName":"Exotic",
        "Created Date":"2020-06-12T03:52:25.027Z",
        "Created By":"1589332566210x919673080739546800",
        "Modified Date":"2020-06-26T22:37:03.554Z",
        "_id":"1591933945027x914059867656276400",
        "_type":"custom.category"
    }
]

But I am getting screen with only lines and css style is applied on it but no data is showing

Please help me how to solve this or any suggestion or alternative to do it Thanks in advance

Answer 1

As you are passing title as a prop to Item in renderItem function, you have to receive that prop using the same prop name in Item function.

const Item = (props) => ( 
    <View style={styles.item}>
        <Text style={styles.title}>{props.cName}</Text>
    </View> 
); 
const renderItem = ({ item }) => ( <Item cName={item.cName} /> );

Answer 2

You passed the cName as title on Item component.

Please change the item component like below.

const Item = (props) => (
  <View style={styles.item}>
    <Text style={styles.title}>{props.title}</Text>
  </View>
);

Answer 3

Here is a better way to handle network requests using React Hooks,

Try extracting your network request to a seperate function and call it inside useEffect.

const fetchData = async() =>
{
   
    const request =  await axios.get('https://randomuser.me/api/');
    setData(request.data);
    console.log(data);
    return request;
}



useEffect(() => {
   
  fetchData();
}, []);