Flatlist not showing items as intended

311
January 23, 2020, at 1:40 PM

I want to display some items with a flatlist, when I tap on the item I want it to turn green. The issue I having is that I tap on a couple of the item and then I search for a device, for example: 112. When I remove the entry I see that the previous items are not in green anymore. Snack: https://snack.expo.io/Skhaj78WU

<FlatList
   data={this.state.data}
   renderItem={({ item }) => <Item item={item}/>
   keyExtractor={item => item[0]}
   ItemSeparatorComponent={this.renderSeparator}
   ListHeaderComponent={this.renderHeader}
   extraData={this.state.data}
/>

This is the Item component:

class Item extends Component{
  constructor(props) {
    super(props)
    this.state={
      currentColor:'white'
    }
    this.onClick = this.onClick.bind(this)
  }
  onClick() {
    console.log(this.props.item[1].isSelected)
    console.log(this.props.item[0])
    this.props.item[1].isSelected = !this.props.item[1].isSelected
    var color = 'white'
    if (this.props.item[1].isSelected){
      color='green'
    }
    this.setState({currentColor:color})
  }
  render(){
    return (
      <TouchableHighlight onPress={this.onClick} key={this.props.item[0]}>
        <View style={[styles.item, {backgroundColor: this.state.currentColor}]}>
          <Text style={styles.title}>{this.props.item[1].name}</Text>
        </View>
      </TouchableHighlight>
    );
  }
}
Answer 1

This line is causing your problems:

this.props.item[1].isSelected = !this.props.item[1].isSelected

Props should always be treated as read-only. The normal method of modifying a list from a list item is to pass a callback to each item and modify the list from the parent component, like this:

Snack

class Item extends Component {
  constructor(props) {
    super(props);
  }
  getColor = () => (this.props.item[1].isSelected ? 'green' : 'white');
  render() {
    return (
      <TouchableHighlight onPress={this.props.onClick} key={this.props.item[0]}>
        <View style={[styles.item, { backgroundColor: this.getColor() }]}>
          <Text style={styles.title}>{this.props.item[1].name}</Text>
        </View>
      </TouchableHighlight>
    );
  }
}
  toggleListItem = index => {
    const { data } = this.state;
    data[index][1].isSelected = !data[index][1].isSelected;
    this.setState({ data });
  };
  render() {
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <FlatList
          data={this.state.data}
          renderItem={({ item, index }) => (
            <Item item={item} onClick={() => this.toggleListItem(index)} />
          )}
          keyExtractor={item => item[0]}
          ItemSeparatorComponent={this.renderSeparator}
          ListHeaderComponent={this.renderHeader}
          extraData={this.state.data}
        />
      </SafeAreaView>
    );
  }
READ ALSO
how to download multiple images from firestore storage in web [duplicate]

how to download multiple images from firestore storage in web [duplicate]

For webHey is there any possible to download url of files from firestore storage without providing the file name in the storage reference ? Like if we have to download and display all the images from a particular folder, is it must to know the names of all the files uploaded...

128
How to implement webpack&#39;s hashed css files into my index.php?

How to implement webpack's hashed css files into my index.php?

I set up a webpack configuration, that uses the MiniCssExtractPlugin to compile my css into a single file into my public folder

121
Return multiple values in JavaScript?

Return multiple values in JavaScript?

I am trying to return two values in JavaScriptIs that possible?

130
Uncaught Promise when rendering redux action with axois

Uncaught Promise when rendering redux action with axois

Hi I am using redux to do some API calls when trying to render the json responseI am trying to log the responses to work out what is happening but even that is not working?

103