title: Add items to FlatList dynamically in React Native
body: <p>I have a FlatList with two items. I need to append this list with another elements. When the user clicks on the button, the data from the text inputs should appear in the end of the FlatList. So, I've tried to push data object to the end of the list's array, but new item replaces the last one. </p>
  
  <pre><code>import React, { useState } from 'react';
  import { Text, View, StyleSheet, Button } from 'react-native';
  import { FlatList } from 'react-native-gesture-handler';
  
  export default function HomeScreen() {
  
    var initialElements = [
      { id : "0", text : "Object 1"},
      { id : "1", text : "Object 2"},
    ]
  
    const [exampleState, setExampleState] = useState(initialElements);
    const [idx, incr] = useState(2);
  
    const addElement = () =&gt; {
      var newArray = [...initialElements , {id : toString(idx), text: "Object " + (idx+1) }];
      initialElements.push({id : toString(idx), text: "Object " + (idx+1) });
      incr(idx + 1);
      setExampleState(newArray);
    }
  
    return (
      &lt;View style={styles.container}&gt;
          &lt;FlatList
              keyExtractor = {item =&gt; item.id}  
              data={exampleState}
              renderItem = {item =&gt; (&lt;Text&gt;{item.item.text}&lt;/Text&gt;)} /&gt;
          &lt;Button
            title="Add element"
            onPress={addElement} /&gt;
      &lt;/View&gt;
    );
  }
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      width: '100%',
      borderWidth: 1
    },
  });
  </code></pre>