Show only 10 records in FaltList React Native

Question

Show only 10 records in FaltList React Native

2.6k views Asked by Zain Khan At 12 November 2019 at 06:41

I'm getting data from API into FlatList in my expo app but the issue is there is more than 500+ records but I want to show only 10 records in FlatList so is there any way to do that?

export default class HomeScreen extends Component {
    constructor() {
        super()
        this.state = {
            itemList: []
        }
    }
    componentWillMount() {
        axios.get('myApiUri')
            .then((response) => {
                this.setState({
                    itemList: response.data
                });
                console.log("Data", response.data)
            })
            .catch(error => console.log("Errorrr:" + error))
    }
    // renderItem(data) {
    //     return (

    //     );
    // }
    render() {
        return (
            <Container style={{ flex: 1, flexDirection: 'row' }}>
                <FlatList
                    data={this.state.itemList}

                    // columnWrapperStyle={{ justifyContent: "space-around", flex: 1 }}
                    maxToRenderPerBatch={10}
                    horizontal
                    renderItem={({ item }) => {
                        return (
                            <View style={{ width: 150, paddingHorizontal: 3 }}>
                                <Card style={{ height: 200, padding:0 }}>
                                    <CardItem>
                                        <Body>
                                            <Image source={{ uri: item.MainImg }} style={{ width: '100%', height: 150 }} />
                                            {item.ItemName.length > 10 ? <Text style={style.productTitle} numberOfLines={1}>{item.ItemName.substring(0,18) + '...'}</Text> : <Text numberOfLines={1} style={style.productTitleLess}>{item.ItemName}</Text>}
                                        </Body>
                                    </CardItem>
                                </Card>
                            </View>
                        );
                    }}
                    keyExtractor={item => item.ID}
                />
            </Container>
        );
    }
}

Original Q&A

There are 2 answers

Akshay Padinjarethadathil On 12 November 2019 at 09:28

When you have a lot of data to show in a list, especially when it's around 500+, it is always good to maintain it as a paginated response from the backend; and then pass only up to 10 values to the FlatList component.

What you can do here, in your case is, paginate it from the frontend.

Your constructor will be like,

constructor() {
    super()
    this.state = {
        itemList: [],
        pages: 0,
        currentPage: 0
    }
}

And your componentWillMount axios call will have a callback like,

(response) => {
     const pages = response.data / 10;
     this.setState({
          itemList: response.data,
          pages
     }
);

Now that you have data in the state, let's render it into FlatList component. In render(),

const { itemList, currentPage } = this.state;
const startingIndex = currentPage + 10;
const endingIndex = startingIndex + 10;
const data = itemList.slice(startingIndex, endingIndex);

And pass the data to FlatList like data={data}.

You'll need to have a paginated button component, and for which you will have a onChange functionality which can be maintained like,

handlePageChange = (currentPage) => {
    this.setState({
        currentPage
    })
}

P.S. here, the index based on the page is maintained assuming the page number will be maintained on 0 indexing.

**Oleg** · Accepted Answer · 2019-11-12T06:45:50+00:00

Oleg On 12 November 2019 at 06:45 BEST ANSWER

By slicing the array:

  <FlatList
                    data={this.state.itemList.slice(0, 10)}

TechQA.

Show only 10 records in FaltList React Native

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in REACT-NATIVE

Related Questions in AXIOS

Related Questions in EXPO

Related Questions in REACT-NATIVE-FLATLIST

Popular Questions

Popular Tags

Trending Questions