Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6212

Why my FlatList in React-Native doesn't update, even after adding extradata?

$
0
0

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,  },})

Viewing all articles
Browse latest Browse all 6212

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>