For the last couple of hours I am trying to make simple list, that you can expand by typing something into text field and pressing button. But it doesn't update my FlatList, even after changing content of extra data. What am I doing wrong?Please don't mind hard coded ID on updateTask, it is only for debugging.
import React, { Component } from 'react'import { View, Text, TouchableOpacity, TextInput, StyleSheet, FlatList } from 'react-native'const DATA = [ { id: '1', title: 'First Item', }, { id: '2', title: 'Second Item', }, { id: '3', title: 'Third Item', },];function Item({ title }) { return (<View style={styles.item}><Text style={styles.title}>{title}</Text></View> );}class Inputs extends Component { state = { task: '', } handleTask = (text) => { this.setState({ task: text }) } updateTask = (task) => { DATA.push({ id: '4', title: task }) alert(DATA.length + task); } render() { return (<View style = {styles.container}><FlatList data={DATA} renderItem={({ item }) => <Item title={item.title} />} keyExtractor={item => item.id} extraData={DATA.length} /><TextInput style = {styles.input} underlineColorAndroid = "transparent" placeholder = "Task" placeholderTextColor = "#9a73ef" autoCapitalize = "none" onChangeText = {this.handleTask}/><TouchableOpacity style = {styles.submitButton} onPress = { () => this.updateTask(this.state.task) }><Text style = {styles.submitButtonText}> Submit </Text></TouchableOpacity></View> ) }}export default Inputsconst styles = StyleSheet.create({ container: { paddingTop: 23 }, input: { margin: 15, height: 40, borderColor: '#7a42f4', borderWidth: 1 }, submitButton: { backgroundColor: '#7a42f4', padding: 10, margin: 15, height: 40, }, submitButtonText:{ color: 'white' }, item: { backgroundColor: '#f9c2ff', padding: 20, marginVertical: 8, marginHorizontal: 16, }, title: { fontSize: 32, },})