FlatList is not rendering my json array data

Question

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.

What do you mean it does not render in flatlist and rendering in return? Can you provide more details? May be the error or your expected results with results you are currently getting. — Samitha Nanayakkara, Nov 20 '18 at 08:19
@SamithaNanayakkara I mean my component standalone visible in return statement but when trying to render in flatList it is not showing my but backgroundColor is also visible. — tron, Nov 20 '18 at 08:32
You have to check your `data1`. You use `array.push(data1);` and if `data1` is an array you will have `[[ data ]]`, and you need to use in `FlatList` this: `data={array[0]}` — oma, Nov 20 '18 at 09:30
@oma thanks for your answer. I found my mistake. I will edit my question thanks again. — tron, Nov 20 '18 at 09:44
@oma yes, it was. I have to get index of 0 to array and restructure the array in data = {array}. I shared the solution. Thanks for your help again. — tron, Nov 20 '18 at 10:15

score 0 · Answer 1 · answered Nov 20 '18 at 09:49

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}
                />
            )}

Did you resolve the issue ? If yes mark the question as resolved and happy coding :) — Stundji, Nov 20 '18 at 11:01

score 0 · Accepted Answer · answered Nov 20 '18 at 10:05

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.

FlatList is not rendering my json array data

2 Answers2