How I can call the key ID of flatlits into other function

Question

In my app, i have a flat list in my app and there is a button I want to add not in the whole flatlist but some of the list components so that's why i need to call the key id of that specific component to the function. Here is the code of flat list. ** <FlatList

  data={this.state.dataSource}
  renderItem={this.renderItem}
 // keyExtractor= {(item,index) => index}
  keyExtractor={item => item.GameId.toString()}
  ItemSeparatorComponent={this.renderSeprator}
  refreshing = {this.state.refreshing}
  onRefresh = {this.handleRefresh} 
  handlePress={item => item.GameId.toString()}
  
  
 
   />

** This is the function where i want to call gameID ** handlePress = () => {

    if(  this.GameId == 1){
      this.setState({
        btnvalue1: 'flex'});
       console.log('ssss11');
      
    } else {
      
      this.setState({
        btnvalue1: 'none'});
        
    }
  }

**

Answer 1

You can do like below

Code

import React, {useState} from 'react';
import {FlatList, View, Text} from 'react-native';

const myData = [
  {
    id: 1,
    name: 'React',
  },
  {
    id: 2,
    name: 'Native',
  },
];

export default function App() {
  const [data, setData] = useState(myData);

  const renderItem = ({item, index}) => {
    return (
      <View
        style={{
          height: 50,
          width: '90%',
          marginLeft: '5%',
          flexDirection: 'row',
          borderWidth: 1,
          borderColor: 'black',
          marginBottom: 10,
        }}>
        <Text>{item.name}</Text>

        {item.name === 'Native' ? (
          <View style={{height: 35, width: 35, backgroundColor: 'red'}}></View>
        ) : null}
      </View>
    );
  };

  return (
    <View>
      <FlatList
        style={{marginTop: 50}}
        data={data}
        keyExtractor={(item, index) => String(index)}
        renderItem={renderItem}
      />
    </View>
  );
}

Hope this helps !!!

Snack expo link