CODEWITHSUNDEEP
reactjsreact-native
Anish Mittal
Anish Mittal

Reputation: 1182

Data is not being displayed in in FlatList

I am displaying some data in React. I read this data from localStorage and display in FlatList. Data is there in array, but not getting displayed.

cartItems is the array which have this data and this array is passed to FlatList.

cartItems = [{"food":"bread","foodPrice":"Rs. 100"},{"food":"bread","foodPrice":"Rs. 100"}, 
{"food":"bread","foodPrice":"Rs. 100"},{"food":"bread","foodPrice":"Rs. 100"}, 
{"food":"bread","foodPrice":"Rs. 100"}]

But no data is being displayed.

Cart.js:

import React from "react";
import {
    StyleSheet,
    FlatList,
    View,
    Image,
    TouchableOpacity,
    Text
} from "react-native";

export default class Cart extends React.Component {
    constructor() {
        super();
        this.state = {
            cartItems: []            
        };

        let orderArray = localStorage.getItem("Foods") // Get previously stored food items
        
        let cartItems = []
        if (orderArray !== null) {
            //cartItems = [...JSON.parse(orderArray)]
            this.setState({cartItems: [...JSON.parse(orderArray)]})
        }
        
        console.log("Cart: cartItems = "+JSON.stringify(cartItems));
    }


    renderItemComponent = (data) =>
        <TouchableOpacity style={styles.container}>
            <Image style={styles.image} source={{ uri: data.item.url }} />
        </TouchableOpacity>

    ItemSeparator = () => <View style={{
        height: 2,
        backgroundColor: "rgba(0,0,0,0.5)",
        marginLeft: 10,
        marginRight: 10,
    }}
    />



    render() {
        return (
            <View>
                <FlatList
                    data={this.state.cartItems}
                    renderItem={({ item }) =>
                    
                        <TouchableOpacity >
                            <Text >{item.food}</Text>
                            <Text >{item.foodPrice}</Text>
                        </TouchableOpacity>
                    }
                    ItemSeparatorComponent={this.ItemSeparator}


                />
            </View>)     
    }
}

const styles = StyleSheet.create({
    container: {
        height: 300,
        margin: 10,
        backgroundColor: '#FFF',
        borderRadius: 6,
    },
    image: {
        height: '100%',
        borderRadius: 4,
    },
});

What can be the root cause of this problem. It seems that, there is very small issue, but not able to find yet.

Upvotes: 1

Views: 56

Answers (1)

karthik
karthik

Reputation: 524

Your component is not re-rendering after cartItems is set like this :

cartItems = [...JSON.parse(orderArray)]

It is taking cartItems as an empty array from initial state and showing no data, so you should use this.setState to re-render the component, the correct way would be like this :

this.setState({cartItems: [...JSON.parse(orderArray)]})

Update :

  • now you are setting the data correctly,
  • but when you are setting the data is important.

if your data is available from local storage initially then it will work for your code, but if the data is not available initially in local storage, then you need to set them correctly using

componentDidMount() or componentDidUpdate() depending on your app scenario (working logic).

then only the data in local storage updation will reflect in you component.

you can also read more details here: https://reactjs.org/docs/react-component.html

also check The Component Lifecycle

Upvotes: 3

Related Questions