CODEWITHSUNDEEP
react-nativereact-native-flatlistlistitem
Elessar
Elessar

Reputation: 93

Why does object prop doesn't show in Flat List?

    this.state={

      task : "",
      the_array : []


    };
  }

  handleTextChange=(some_task) =>{

    this.setState({
      task : some_task

    });
  }

  pushToList = () => {
    let taskitem = {
      name: this.state.task,
    };
    this.setState({
      the_array: [...this.state.the_array, taskitem],
    });
  }

  render() {
    return(
      <View style={{backgroundColor:'powderblue', height:'100%'}}>
        <FlatList data = {this.state.the_array}
          renderItem={(item) => <Text>{item.name}</Text>} keyExtractor={(item) => item.name} >
        </FlatList>        
        <TextInput style={{ backgroundColor: 'lightsteelblue', height:60, borderRadius : 25, marginBottom:20}} 
        onChangeText={this.handleTextChange}>
        </TextInput>

        <TouchableOpacity style={{
          backgroundColor: 'mediumpurple', height: 60, width: 80, alignSelf: 'center', borderRadius: 20, justifyContent: 'center',
          alignItems: 'center', marginBottom:20
        }} onPress={this.pushToList}>

This is my code.I'm trying to add Textinput content to Flatlist. For that purpose, I defined an object inside my button onPress method('pushToList'), named 'taskitem', and set a prop for it named 'name'. 'pushTolistMethod' is supposed to put the 'name' into the Flatlist on screen. but strangely it doesn't work and nothing happens when I press the button. I was wondering if anybody could help me with that.

Upvotes: 0

Views: 31

Answers (1)

SuleymanSah
SuleymanSah

Reputation: 17868

Can you replace your flatlist code like this and try?

    <FlatList data = {this.state.the_array}
      renderItem={({ item }) => <Text>{item.name}</Text>} keyExtractor={(item) => item.name} >
    </FlatList>

The data is on the item key so we use destructuring to access that from within the function.

Upvotes: 1

Related Questions