FlatList is not rendering my json array data [RESOLVED]

I've issue with rendering my array json data in FlatList component. I've searched lots of documentation and information through web and stackoverflow. Here is a couple of links of webpages that I've looked. But I couldn't figure it out.

How to use Flatlist

FlatList

FlatList not Rendering

Here is my code;

//Creating array for map the each item in places.
let array = [];
//Initializing the data to array for mapping it. data1 is my json data.
array.push(data1);

flatList = <FlatList
        style={{ backgroundColor: 'red' }} // backgroundColor is visible but no List Component data in it.
        data={array}
        keyExtractor={(x, i) => i.toString()}
        renderItem={({item}) => {
            <List
                district = {item.a.b.c.jsonArray[0].address}
                phoneNumber = {item.a.b.c.jsonArray[0].phoneNumber}
                neighbourhood = {item.a.b.c.jsonArray[0].sideInformation}
            /> // nothing returns as <List />
        }}
    />;

Here is my return statement;

return (
        <View style={{ flex: 1 }} >
            <TopBar
                name={"title"}
                bColor={"#1b92e7"}
                miniLogo={require('../../../assets/pictures/image.png')}
            />
            <List></List> 
            <List></List>
            {flatList}
        </View>
    );

In return statement it is rendering those two component but in the flatList variable it is not rendering . What is causing the problem? I hope you guys can help me?

I appreciate your efforts lots of thanks.

2 answers

  • answered 2018-11-20 09:49 Stundji

    You are not returning anything from renderItem Try like that:

     renderItem={({item}) => {
                return (<List // for every item return your component
                    district = {item.a.b.c.jsonArray[0].address}
                    phoneNumber = {item.a.b.c.jsonArray[0].phoneNumber}
                    neighbourhood = {item.a.b.c.jsonArray[0].sideInformation}
                />); 
            }}
    

    Or just use the short syntax:

    renderItem={({item}) => (<List // take a look at the brackets
                        district = {item.a.b.c.jsonArray[0].address}
                        phoneNumber = {item.a.b.c.jsonArray[0].phoneNumber}
                        neighbourhood = {item.a.b.c.jsonArray[0].sideInformation}
                    />
                )}
    

  • answered 2018-11-20 10:05 tron

    As @oma's answer I changed the data as below;

    data = {array} -> data = {array[0]}
    

    and my another mistake was thinking ({item}) is referring json data that I want to render. It must be equal to array of json data we want to render.

    //final data.
    data = {array[0].a.b.c.jsonArray}
    

    As @Stundji's answer it should return the List.

    renderItem={({item}) => {
            return (<List
                district = {item.address}
                phoneNumber = {item.phoneNumber}
                neighbourhood = {item.sideInformation}
            />); //now it returns list in FlatList
        }}
    

    Thanks for all contribution.