Add Items to a Flatlist

Question

I’ve been trying to add Items to a Flatlist in React Native, so I used the following code:

export default function App(){

  var list = [

    {text: 'Hello', key: 1},
    {text: 'Bye', key: 2}

  ]

  return(

    <View style={{flex: 1, backgroundColor: '#fff', justifyContent: 'center', alignItems: 'center'}}>
      <FlatList data={list} showsVerticalScrollIndicator = {false}
      renderItem= { ({ item }) => (

      <Text style={{marginTop: 40}}>{item.text}</Text>

      ) }/>
      <TouchableOpacity style={{marginBottom: 40}} onPress={ () => list.push({text: 'Hi', key: 3}) }>
        <Text>Hello</Text>
      </TouchableOpacity>
    </View>

  )

}

But when I click the button, just nothing happens, someone knows exactly why?

Answer 1

The button may even be adding your item to the list, but the React does not know that you need to render the data again FlatList.

For you to work with this kind of change in the status of the application data, you must use the state of React:

https://reactnative.dev/docs/intro-react#state

---

Then you start importing the function useState:

import React, { useState } from 'react';

Your list is created via the function useState, that will return you the list and also a function of set to the list:

const [list, setList] = useState(
                         [
                           {text: 'Hello', key: 1},
                           {text: 'Bye'  , key: 2}
                         ]
                        );

Note that I have already created the list with the values you had.

With that, you now have the function setList, when used, the React will know that you need to render new data.

We can create a function that will be responsible for adding the items in the list, using the setList:

let key = list.length;

function addToList() {
  list.push({text: 'Hi', key: ++key});
  setList([...list]);
}

I made a small change so that the key will always be different to avoid mistakes, is just an example.

Now just call the function addToList in the onPress of TouchableOpacity:

<TouchableOpacity style={{marginBottom: 40}} onPress={ () => addToList() }>

---

Your complete code will look like this:

import React, { useState } from 'react';
import { Text, View, FlatList, TouchableOpacity} from 'react-native';

export default function App() {

  const [list, setList] = useState(
                            [
                              {text: 'Hello', key: 1},
                              {text: 'Bye'  , key: 2}
                            ]
                          );
  let key = list.length;

  function addToList() {
    list.push({text: 'Hi', key: ++key});
    setList([...list]);
  }

  return(

    <View style={{flex: 1, backgroundColor: '#fff', justifyContent: 'center', alignItems: 'center'}}>

      <FlatList data={list} showsVerticalScrollIndicator = {false}
          renderItem= { ({ item }) => (

          <Text style={{marginTop: 40}}>{item.text}</Text>

      ) }/>

      <TouchableOpacity style={{marginBottom: 40}} onPress={ () => addToList() }>
          <Text>Hello</Text>
      </TouchableOpacity>

    </View>

  );

}

---

See online: https://snack.expo.io/tvAPFZfB3