I'm very new to react native and I'm trying to update list dynamically.

Below is my code:

import React, { Component } from "react";
import { View, Text, StyleSheet, FlatList } from "react-native";
import { Tile, ListItem, List } from "react-native-elements";


export default class JoinSession extends Component {

    constructor() {
        super();

        this.state = {
            dataToRender: [{ "id": "0", "name": "name0", "des": "des0" }]
        }
    }

    componentDidMount() {   
        var counter = 0;
        const interval = setInterval(() => {
            try {
                var temp = {
                    "id": ++counter + "",
                    "name": "name" + counter,
                    "des": "des" + counter
                }

                let tempArray = this.state.dataToRender;
                tempArray.push(temp);

                this.setState({
                    dataToRender: tempArray
                });

                console.log(this.state.dataToRender);

                if(counter === 10) {
                    clearInterval(interval);
                }
            } catch (e) {
                console.log(e.message);
            }
        }, 2000);
    }

    renderList(item) {
        console.log(item);

        return (
            <ListItem
                roundAvatar
                title={item.name}
                subtitle={item.des}
            />
        );
    }

    render() {
        return (
            <View style={{ flex: 1, alignItems: "stretch", backgroundColor: "skyblue" }}>
                <List>

                    <FlatList
                        data={this.state.dataToRender}
                        renderItem={({ item }) => this.renderList(item)}
                        keyExtractor={item => item.id}
                    />
                </List>
            </View>
        );
    }
}

I am only able to get first element which I've declared in the constructor but data which I'm appending in serInterval is not showing up on the page.

Please help me to resolve it or if there is any other way to do it, please let me know.

Thanks in advance.

I'm very new to react native and I'm trying to update list dynamically.

Below is my code:

import React, { Component } from "react";
import { View, Text, StyleSheet, FlatList } from "react-native";
import { Tile, ListItem, List } from "react-native-elements";


export default class JoinSession extends Component {

    constructor() {
        super();

        this.state = {
            dataToRender: [{ "id": "0", "name": "name0", "des": "des0" }]
        }
    }

    componentDidMount() {   
        var counter = 0;
        const interval = setInterval(() => {
            try {
                var temp = {
                    "id": ++counter + "",
                    "name": "name" + counter,
                    "des": "des" + counter
                }

                let tempArray = this.state.dataToRender;
                tempArray.push(temp);

                this.setState({
                    dataToRender: tempArray
                });

                console.log(this.state.dataToRender);

                if(counter === 10) {
                    clearInterval(interval);
                }
            } catch (e) {
                console.log(e.message);
            }
        }, 2000);
    }

    renderList(item) {
        console.log(item);

        return (
            <ListItem
                roundAvatar
                title={item.name}
                subtitle={item.des}
            />
        );
    }

    render() {
        return (
            <View style={{ flex: 1, alignItems: "stretch", backgroundColor: "skyblue" }}>
                <List>

                    <FlatList
                        data={this.state.dataToRender}
                        renderItem={({ item }) => this.renderList(item)}
                        keyExtractor={item => item.id}
                    />
                </List>
            </View>
        );
    }
}

I am only able to get first element which I've declared in the constructor but data which I'm appending in serInterval is not showing up on the page.

Please help me to resolve it or if there is any other way to do it, please let me know.

Thanks in advance.

• javascript
• react-native
• react-native-flatlist

• 1 Try not to mutate the state by using concat instead of push or using a spread operator to define the state as let tempArray={...this.state.dataToRender}; – Pritish Vaidya Commented May 31, 2018 at 12:18
• @PritishVaidya I've tried creating a new array using dataToRender: tempArray.slice() and it worked. The array was mutating in code. Thanks for the help. – Shubham Commented Jun 1, 2018 at 11:48

3 Answers 3

Hi try to have a look on the extraData parameter you can use on a FlatList:

By passing extraData={this.state} to FlatList we make sure FlatList itself will re-render when the state.selected changes. Without setting this prop, FlatList would not know it needs to re-render any items because it is also a PureComponent and the prop comparison will not show any changes.

<FlatList
 ...
 extraData={this.state}
/>

More info on the FlatList documentation: https://facebook.github.io/react-native/docs/flatlist.html

Also you shouldn't need this <List> from react native element here the list behaviour is totally handle by your FlatList.

Like say @AlexDG Flat list is Pure component. For updating pure component use key prop.

But do not overdo it, otherwise you can get unnecessary redrawing.

<FlatList
  key={this.state.dataToRender.length} <---------- rerender
  data={this.state.dataToRender}
  renderItem={({ item }) => this.renderList(item)}
  keyExtractor={item => item.id}
/>

I just had this on my own and just so happened to read this comment by OP:

The problem was array mutation. Never mutate array or object in react native.

And I indeed changed my state this way:

this.setState(prev =>
    prev.listData.push("stuff");
    return prev;
});

And you can see it in the question as well:

let tempArray = this.state.dataToRender;
tempArray.push(temp);

After changing it to

this.setState(prev => {
    let copy = Array.from(prev.listData);
    copy.push("stuff");
    return {listData: copy};
});

however, my list was updating just fine!

So if you are mutating an array in your state that is related to your list's data you might want to see if this helps some.